/* Lazarus theme for the mempool frontend (v3.x). * Injected after styles.css by nginx sub_filter, so equal-specificity rules here win; the * app's component styles are injected later still and carry an attribute, so anything that * has to beat one of those is written with one more class rather than !important. * Palette and type mirror pool/static/pool.css: warm near-black, brass accent, * IBM Plex Sans / Newsreader / IBM Plex Mono. Chart colours live in JS and are left alone. * Fonts: theme.js adds the preconnects and the Google Fonts from ; there is * deliberately no @import here (it was a serial, render-blocking chain). * Shape: pills for buttons and chips, 12px for cards and boxes, 2-4px for badges, inputs * and tables. Space: 8 / 12 / 16 / 24. */ :root { /* Lazarus tokens: the same values as pool/static/pool.css (hex fallbacks first, oklch below). One deliberate difference: --lz-faint is lighter than the pool's --faint so that small text in it reaches 4.5:1 on both the page and a raised panel. */ --lz-bg: #0b0804; --lz-bg-raised: #130f09; --lz-bg-inset: #070502; --lz-bg-card: #100d07; --lz-ink: #efebe1; --lz-muted: #a8a094; --lz-faint: #867f74; --lz-line: #28231c; --lz-line-strong: #484137; --lz-brass: #dfb866; --lz-brass-hi: #ecc97b; /* hover brass */ --lz-brass-dim: #a0854e; --lz-brass-ink: #201301; --lz-brass-wash: #3b3020; --lz-track: #2a251d; /* meters, secondary fills, skeleton base */ --lz-track-hi: #3d362b; /* skeleton sweep */ --lz-select: #6d5a2e; /* ::selection */ --lz-steel: #7aa3c8; /* the one cool accent (series palette in theme.js) */ --lz-good: #65c98c; --lz-bad: #e47164; --lz-warn: #e1b75c; /* Fee faces that CSS controls (mined blocks): dark copper -> copper-brass, both dark enough for the white block text (9.4:1 and 5.6:1). */ --lz-face-lo: #613f1a; --lz-face-hi: #866125; --lz-radius-pill: 999px; --lz-radius-card: 12px; --lz-radius-tight: 4px; /* The explorer ships zh / ja / ko: same CJK fallbacks as the pool site. */ --lz-cjk: "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Source Han Sans SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; --lz-sans: "IBM Plex Sans", var(--lz-cjk), "Helvetica Neue", Helvetica, Arial, sans-serif; --lz-serif: "Newsreader", "Songti SC", "Noto Serif SC", "Source Han Serif SC", "STSong", "SimSun", "Iowan Old Style", Palatino, "Times New Roman", serif; --lz-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; /* Chi Rho (labarum): the Lazarus mark, geometry identical to chi-rho.svg next door and to --chi-rho in pool/static/pool.css. Masked so it takes --lz-brass where it is used; the .svg file is what nginx serves as the mining-pool logo. Its viewBox is cropped to the mark, so any box masking it wants width = 0.636 * height. */ --lz-chi-rho: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2020.36%2032%22%3E%3Cpath%20d=%22M15.96%204.16C15.96%202.91%2015.56%202.02%2014.61%201.56C14.14%201.33%2013.51%201.21%2012.71%201.21H9.61L9.69%200H13.65C14.77%200%2015.67%200.18%2016.36%200.55C17.04%200.91%2017.54%201.4%2017.86%202.01C18.17%202.63%2018.33%203.32%2018.33%204.07C18.33%204.84%2018.17%205.55%2017.84%206.2C17.52%206.84%2017.01%207.36%2016.32%207.75C15.63%208.13%2015.3%208.33%2014.01%208.33H9.69L9.61%207.12H13.4C14.39%207.12%2015.19%206.66%2015.63%205.78C15.85%205.35%2015.96%204.81%2015.96%204.16ZM11.57%200%2011.57%2010.83V30.94L13.18%2031.55V32H7.2V31.55L8.8%2030.94V10.83V1.06L7.2%200.45V0ZM9.8%2020.31%203.89%2027.07%206.01%2027.79V28.32H0V27.79L2.08%2027.07L9.02%2019.39L9.97%2018.7L15.18%2012.61L13.05%2011.89V11.36H19.07V11.89L16.99%2012.61L10.77%2019.61ZM14.05%2027.07%209.04%2020.79%208.6%2020.39%202.34%2012.63%200.3%2011.89V11.36H8.93V11.89L6.61%2012.61L10.91%2018.05L11.38%2018.5L18.32%2027.04L20.36%2027.79V28.32H11.73V27.79Z%22/%3E%3C/svg%3E"); /* mempool theme variables */ --bg: var(--lz-bg); --active-bg: var(--lz-bg-inset); --hover-bg: var(--lz-bg-raised); --fg: var(--lz-ink); --nav-bg: var(--lz-bg); --navbar-bg: var(--lz-bg); --title-fg: var(--lz-brass); --primary: var(--lz-brass); --secondary: var(--lz-track); --tertiary: var(--lz-brass-wash); --success: var(--lz-good); --info: var(--lz-brass); --link-color: var(--lz-brass); --link-hover-color: var(--lz-brass-hi); --icon: var(--lz-ink); --skeleton-bg: var(--lz-track); --skeleton-bg-light: var(--lz-track-hi); --box-bg: var(--lz-bg-raised); --stat-box-bg: var(--lz-bg-inset); --alert-bg: var(--lz-track); --transparent-fg: #efebe1bb; --fade-out-box-bg-start: rgba(19, 15, 9, 0); --fade-out-box-bg-end: rgba(19, 15, 9, 1); --mainnet-alt: var(--lz-brass-dim); --taproot: var(--lz-brass); --taproot-light: var(--lz-warn); --taproot-dark: var(--lz-brass-dim); --green: var(--lz-good); --red: var(--lz-bad); --yellow: var(--lz-warn); --grey: var(--lz-faint); --tooltip-grey: var(--lz-muted); --orange: var(--lz-warn); --search-button: var(--lz-brass-wash); --search-button-border: var(--lz-line-strong); --search-button-focus: #4a3c21; --search-button-shadow: #dfb86640; color-scheme: dark; } @supports (color: oklch(50% 0.1 80)) { :root { --lz-bg: oklch(13.5% 0.011 78); --lz-bg-raised: oklch(17% 0.013 78); --lz-bg-inset: oklch(11.5% 0.011 78); --lz-bg-card: oklch(16% 0.013 78); --lz-ink: oklch(94% 0.014 86); --lz-muted: oklch(71% 0.02 80); --lz-faint: oklch(60% 0.018 80); /* pool.css has 54%; 60% is what clears 4.5:1 */ --lz-line: oklch(26% 0.015 78); --lz-line-strong: oklch(38% 0.02 78); --lz-brass: oklch(80% 0.11 84); --lz-brass-hi: oklch(85% 0.105 86); --lz-brass-dim: oklch(63% 0.08 84); --lz-brass-ink: oklch(20% 0.04 75); --lz-good: oklch(76% 0.13 155); --lz-bad: oklch(68% 0.145 28); --lz-warn: oklch(80% 0.12 85); } } /* --- base ---------------------------------------------------------------- */ html { scrollbar-gutter: stable; } body { font-family: var(--lz-sans); color: var(--lz-ink); background: radial-gradient(1200px 500px at 8% -10%, rgba(64, 48, 18, 0.45), transparent 55%), var(--lz-bg) !important; text-rendering: optimizeLegibility; } ::selection { background: var(--lz-select); color: var(--lz-ink); } /* Focus: one visible ring everywhere, for keyboard users only. Bootstrap zeroes the outline on .btn / .form-control and substitutes a glow; the explicit list puts the ring back. */ :focus-visible, a:focus-visible, button:focus-visible, .btn:focus-visible, .nav-link:focus-visible, .page-link:focus-visible, .dropdown-item:focus-visible, .form-control:focus-visible, .custom-select:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--lz-brass); outline-offset: 2px; } a { color: var(--lz-brass); } a:hover { color: var(--lz-brass-hi); } .text-monospace, code, .txid, .hash, .address-text { font-family: var(--lz-mono) !important; font-feature-settings: "tnum" 1; } /* Data is mono and tabular, so live updates do not make columns jitter: hashes, txids and addresses (app-truncate), amounts, fee rates, block heights and the figures on a block face. Everything else numeric keeps the sans but gets tabular figures. */ app-truncate .truncate-link, app-truncate .first, app-truncate .last-four, app-amount, app-fee-rate, .fee-text, .block-height, .bitcoin-block .fee-span, .bitcoin-block .transaction-count { font-family: var(--lz-mono); font-variant-numeric: tabular-nums; } /* 700 is not among the loaded mono weights; 600 is. Three classes to outrank the component. */ .bitcoin-block .block-body .block-size { font-family: var(--lz-mono); font-variant-numeric: tabular-nums; font-weight: 600; } .table td, .table th, app-fiat, app-time, app-timestamp, .card-text, .progress-bar { font-variant-numeric: tabular-nums; } h1, h2, h3, h4, .h1, .h2, .h3 { text-wrap: balance; } .text-white, .text-white a { color: var(--lz-ink) !important; } .text-muted { color: var(--lz-muted) !important; } /* --- header ---------------------------------------------------------------- */ .sticky-header { background: rgba(11, 8, 4, 0.82) !important; border-bottom: 1px solid var(--lz-line); } /* Blur behind the header via a pseudo-element: backdrop-filter on the header itself would * turn it into the containing block for the mobile nav, which is position: fixed. */ .sticky-header::after { content: ""; position: absolute; inset: 0; z-index: -1; backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1); pointer-events: none; } .sticky-header::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: linear-gradient(90deg, var(--lz-brass), transparent 55%); pointer-events: none; } .navbar { background: transparent !important; } /* Wordmark in place of the mempool logo; the footer keeps the project's own mark. The stock logo element stays in the flow and carries the Chi Rho, so the brand reads mark + wordmark without touching the app's DOM. It is the brand's only real child, so it sits between the two pseudo-elements holding the wordmark; order pulls it back in front of them. */ .navbar-brand app-svg-images.mempool-logo { display: inline-block !important; order: -1; align-self: center; vertical-align: -0.16em; width: 0.67em; height: 1.05em; background: var(--lz-brass); -webkit-mask: var(--lz-chi-rho) center / contain no-repeat; mask: var(--lz-chi-rho) center / contain no-repeat; } .navbar-brand app-svg-images.mempool-logo svg { display: none !important; } .navbar-brand { align-items: baseline !important; gap: 0.4rem; font-family: var(--lz-serif); font-size: 1.7rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1; color: var(--lz-ink) !important; text-decoration: none; padding-top: 0.55rem; padding-bottom: 0.45rem; } .navbar-brand::before { content: "Lazarus"; } .navbar-brand::after { content: "Mempool"; font-style: italic; font-weight: 400; color: var(--lz-brass); } .navbar-brand .connection-badge { top: -8px; } /* Nav items: quiet by default, brass underline on hover, brass wash when active. */ .lz-btc-price-item { display: flex; align-items: center; align-self: stretch; /* .navbar-nav .nav-item already has a 2px bottom border; pair it so the price does not sit a pixel above the wordmark / other tabs. */ border-top: 2px solid transparent; } .lz-btc-price-item .lz-btc-price { display: flex; min-width: 4.5ch; /* "…" -> "$0.12" must not shove the nav along */ align-items: center; justify-content: center; height: 100%; line-height: 1; padding-top: 0.12em; font-family: var(--lz-mono); font-variant-numeric: tabular-nums; color: var(--lz-brass) !important; white-space: nowrap; } .lz-btc-price-item .lz-btc-price::after { content: none; } @media (max-width: 520px) { .lz-btc-price-item .lz-btc-price { font-size: 0.85em; } } .navbar-nav .nav-item { border-bottom: 2px solid transparent; transition: border-color 140ms, background-color 140ms; } .navbar-nav .nav-item:hover { border-bottom-color: var(--lz-brass); } .navbar-nav li.nav-item.active { background-color: var(--lz-brass-wash) !important; border-bottom-color: var(--lz-brass); } .navbar-nav .nav-link { color: var(--lz-muted) !important; } .navbar-nav .nav-item.active .nav-link, .navbar-nav .nav-item:hover .nav-link { color: var(--lz-ink) !important; } .navbar-nav .nav-link svg { fill: currentColor; } /* Injected "Lazarus Pool" / Discord nav links (theme.js) */ .lz-pool-item, .lz-discord-item, .lz-neoxa-item { display: flex; align-items: center; align-self: stretch; border-top: 2px solid transparent; } /* .navbar-nav in front: Bootstrap's .navbar-expand-lg .navbar-nav .nav-link sets the inline padding with three classes, and matching that beats it without !important. */ .navbar-nav .lz-pool-item .nav-link, .navbar-nav .lz-discord-item .nav-link, .navbar-nav .lz-neoxa-item .nav-link { display: flex; align-items: center; justify-content: center; gap: 0.45rem; height: 100%; line-height: 1; padding-inline: 0.7rem; } .lz-pool-item .lz-mark { display: block; width: 0.83rem; height: 1.3rem; background: var(--lz-brass-dim); -webkit-mask: var(--lz-chi-rho) center / contain no-repeat; mask: var(--lz-chi-rho) center / contain no-repeat; transition: background-color 140ms; } .lz-pool-item .lz-label, .lz-discord-item .lz-label, .lz-neoxa-item .lz-label { font-family: var(--lz-mono); font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; line-height: 1; } .lz-pool-item .lz-label::after, .lz-discord-item .lz-label::after, .lz-neoxa-item .lz-label::after { content: " ↗"; color: var(--lz-faint); } .lz-pool-item:hover .lz-mark { background: var(--lz-brass); } @media (max-width: 991.98px) { /* Bottom tab bar on small screens: icon only, like the stock items. */ .lz-pool-item .lz-label { display: none; } .lz-pool-item { min-width: 44px; } /* icon only: keep a full tap target */ .navbar-nav .lz-pool-item .nav-link { padding: 12px 0; min-height: 44px; } .lz-discord-item, .lz-neoxa-item { display: none; } } /* Inputs: tight corners, inset ground */ .form-control, .custom-select { background-color: var(--lz-bg-inset) !important; border: 1px solid var(--lz-line-strong) !important; border-radius: var(--lz-radius-tight) !important; color: var(--lz-ink) !important; } .form-control::placeholder { color: var(--lz-faint); opacity: 1; } .form-control:focus { border-color: var(--lz-brass) !important; box-shadow: 0 0 0 0.15rem #dfb86633 !important; } /* Header search: the one input that is a pill, like the pool site's address field, because it sits against a pill button. Taller and roomier than the stock 38px box. */ app-search-form .search-box-container .form-control { height: 2.6rem; padding: 0 1.1rem; border-radius: var(--lz-radius-pill) !important; font-size: 0.94rem; text-overflow: ellipsis; } app-search-form .btn { height: 2.6rem; } /* Buttons: the pool site's treatment. Pill, 600, brightness on hover; .btn-secondary and the outline buttons are its ghost variant. Inside a .btn-group Bootstrap's own, more specific rules square the inner corners, so a segmented control keeps pill ends only. */ .btn { border-radius: var(--lz-radius-pill); font-weight: 600; letter-spacing: 0.01em; } .btn-purple, .btn-primary { background-color: var(--lz-brass) !important; border-color: var(--lz-brass) !important; color: var(--lz-brass-ink) !important; } .btn-purple:hover, .btn-primary:hover, .btn-purple:focus, .btn-primary:focus { filter: brightness(1.07); box-shadow: none !important; } .btn-purple svg, .btn-primary svg { fill: var(--lz-brass-ink); } .btn-secondary { background-color: transparent !important; border-color: var(--lz-line-strong) !important; color: var(--lz-ink) !important; } .btn-secondary:hover, .btn-secondary:focus { border-color: var(--lz-brass) !important; color: var(--lz-brass) !important; box-shadow: none !important; } .btn-outline-info, .btn-outline-primary { color: var(--lz-brass) !important; border-color: var(--lz-brass-dim) !important; } .btn-outline-info:hover, .btn-outline-primary:hover { background-color: var(--lz-brass) !important; color: var(--lz-brass-ink) !important; } /* --- surfaces ---------------------------------------------------------------- */ /* Flat, calm panels: one hairline, no shadow, 12px corners, 16px inside (12 on phones). */ .box, .card { background-color: var(--lz-bg-raised) !important; border: 1px solid var(--lz-line) !important; border-radius: var(--lz-radius-card) !important; box-shadow: none !important; } .box { padding: 16px; } @media (max-width: 575.98px) { .box { padding: 12px; } } .card-header { background-color: var(--lz-bg-inset) !important; border-bottom: 1px solid var(--lz-line) !important; border-radius: calc(var(--lz-radius-card) - 1px) calc(var(--lz-radius-card) - 1px) 0 0 !important; } /* Dashboard card titles as micro-labels (the pool site's kicker). Three classes: the components set .card-title to 1rem with an attribute selector of their own. */ .dashboard-container .card .card-title, .dashboard-container .card-body .card-title { font-family: var(--lz-mono); font-size: 0.69rem; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; } .title-link, .title-link:hover, .title-link:focus { color: var(--lz-brass) !important; } .box h5, .box .title, .card h5 { font-family: var(--lz-serif); font-weight: 500; letter-spacing: -0.01em; } .table { color: var(--lz-ink); } .table td, .table th { border-color: var(--lz-line) !important; } .table thead th { border-bottom: 1px solid var(--lz-line-strong) !important; color: var(--lz-muted); font-size: 0.69rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; } /* Row hover is a wash, never a size change. */ .table-hover tbody tr:hover, .table tr:hover td { background-color: rgba(223, 184, 102, 0.06); color: inherit; } .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255, 255, 255, 0.015); } hr { border-color: var(--lz-line); } /* Badges / pills: brass = primary, muted greys for secondary */ .badge { border-radius: 3px; font-weight: 500; } .badge-primary, .badge-info { background-color: var(--lz-brass) !important; color: var(--lz-brass-ink) !important; } .badge-secondary { background-color: var(--lz-track) !important; color: var(--lz-ink) !important; border: 1px solid var(--lz-line-strong); } .badge-success { background-color: var(--lz-good) !important; color: #0b2214 !important; } .badge-danger { background-color: var(--lz-bad) !important; color: #2a0b06 !important; } .badge-warning { background-color: var(--lz-warn) !important; color: var(--lz-brass-ink) !important; } .badge-dark { background-color: var(--lz-bg-inset) !important; border: 1px solid var(--lz-line); } /* Progress meters */ .progress { background-color: var(--lz-track) !important; border-radius: var(--lz-radius-pill) !important; } .progress-bar { background-color: var(--lz-brass) !important; color: var(--lz-brass-ink); } .progress-bar.bg-success { background-color: var(--lz-good) !important; } .progress-bar.bg-warning { background-color: var(--lz-warn) !important; } .progress-bar.bg-danger { background-color: var(--lz-bad) !important; } /* Dropdowns, tooltips, alerts, pagination */ .dropdown-menu { background-color: var(--lz-bg-raised) !important; border: 1px solid var(--lz-line-strong) !important; border-radius: 8px !important; color: var(--lz-ink); } .dropdown-item { color: var(--lz-ink) !important; } .dropdown-item:hover, .dropdown-item:focus { background-color: var(--lz-brass-wash) !important; } .tooltip-inner { background-color: var(--lz-bg-inset) !important; border: 1px solid var(--lz-line-strong); color: var(--lz-ink); border-radius: var(--lz-radius-tight); font-family: var(--lz-sans); } .alert, .alert-mempool { background-color: var(--lz-bg-raised) !important; border: 1px solid var(--lz-line-strong) !important; color: var(--lz-ink) !important; border-radius: 8px; } .page-link { background-color: var(--lz-bg-raised) !important; border-color: var(--lz-line) !important; color: var(--lz-brass) !important; } .page-item.active .page-link { background-color: var(--lz-brass) !important; border-color: var(--lz-brass) !important; color: var(--lz-brass-ink) !important; } .page-item.disabled .page-link { color: var(--lz-faint) !important; } .nav-tabs .nav-link.active, .nav-pills .nav-link.active { background-color: var(--lz-brass-wash) !important; color: var(--lz-ink) !important; border-color: var(--lz-line) !important; } .nav-tabs .nav-link { color: var(--lz-muted); } .btn-group .btn.active, .btn-group .btn-primary.active { background-color: var(--lz-brass) !important; color: var(--lz-brass-ink) !important; } /* Bootstrap colour utilities that mempool leans on */ .text-info, .text-primary { color: var(--lz-brass) !important; } .text-success, .green-color { color: var(--lz-good) !important; } .text-danger, .red-color { color: var(--lz-bad) !important; } .text-warning, .yellow-color { color: var(--lz-warn) !important; } .bg-primary, .bg-info { background-color: var(--lz-brass) !important; color: var(--lz-brass-ink) !important; } .bg-success { background-color: var(--lz-good) !important; } .bg-danger { background-color: var(--lz-bad) !important; } /* Blockchain strip: the 3-D block side faces are hard-coded blue-greys in component CSS. * Projected (mempool) block faces are inline gradients from the fee ramp in theme.js and * are not reachable from here. Mined block faces are: the app paints them from * var(--mainnet-alt) to var(--primary), which on this theme meant dim brass to full brass * under white text (under 2:1). Scoping the two variables to the block keeps the rest of the * UI brass and gives the face a dark copper -> copper-brass ramp the white text can sit on. */ .bitcoin-block.mined-block { --mainnet-alt: var(--lz-face-lo); --primary: var(--lz-face-hi); } /* --yellow on copper is under 4.5:1; the ink is not. Three classes to outrank the component. */ .mined-block .block-body .fee-span { color: var(--lz-ink); } /* theme.js (faceInk) marks a projected block or the fee-priority bar whose fee colours are bright -- the brass and amber steps of the ramp -- and those take the dark ink instead. */ .lz-face-bright, .lz-face-bright a, .lz-face-bright .fee-label, .lz-face-bright .block-body .fee-span, .bitcoin-block.blink-bg, .bitcoin-block.blink-bg a, .bitcoin-block.blink-bg .block-body .fee-span { color: var(--lz-brass-ink) !important; } /* Block tiles: hover is an inset hairline. No transition of our own (the component animates background / position on these and a second transition list would replace it), no filter (it would re-stack the z-index:-1 side face), no size change. */ .bitcoin-block.mined-block:hover, .mempool-block.bitcoin-block:hover { box-shadow: inset 0 0 0 1px var(--lz-brass); } .bitcoin-block::after { background-color: #2b261e !important; } .bitcoin-block::before { background-color: #1d1912 !important; } .mempool-block.bitcoin-block::after { background-color: #3a3328 !important; } .mempool-block.bitcoin-block::before { background-color: #251f17 !important; } .band-separator.fill { background: repeating-linear-gradient(90deg, var(--lz-track-hi), var(--lz-track-hi) 2px, var(--lz-bg-raised) 2px 4px) !important; } .badge.badge-accelerated { background-color: var(--lz-brass-dim) !important; box-shadow: none !important; animation: none !important; } /* Skeleton loaders: the stock sweep (keyframes "progress", a 200px band travelling across) on a warm track. Longhands only -- the old `background` shorthand here reset the band's size and position, which is why the shimmer never moved. */ .skeleton-loader { background-color: var(--lz-track) !important; background-image: linear-gradient(90deg, transparent, var(--lz-track-hi) 45%, rgba(223, 184, 102, 0.16) 50%, var(--lz-track-hi) 55%, transparent) !important; background-repeat: no-repeat !important; background-size: 200px 100% !important; border-radius: 3px; } /* --- footer ---------------------------------------------------------------- */ footer { border-top: 1px solid var(--lz-line); background-color: var(--lz-bg) !important; } footer a { color: var(--lz-muted) !important; } footer a:hover { color: var(--lz-brass) !important; } footer .links .category { color: var(--lz-brass) !important; font-family: var(--lz-mono); font-weight: 500 !important; font-size: 0.78em; letter-spacing: 0.06em; text-transform: uppercase; } footer .row.version p a { color: var(--lz-brass) !important; } footer .lz-theme-ver { color: var(--lz-faint); } footer .main-logo svg { opacity: 0.85; } footer .lz-links p { margin-bottom: 0.25rem; } footer .lz-links .lz-sub-category { margin-top: 0.9rem; } footer .lz-footer-endpoint { display: flex; align-items: center; gap: 0.4rem; } footer .lz-footer-endpoint code { font-size: 0.78rem; color: var(--lz-ink); word-break: break-all; } footer .lz-footer-note { font-size: 0.74rem; color: var(--lz-faint) !important; } footer .lz-source-note a { color: var(--lz-brass) !important; } app-tx-features .lz-replay { margin-left: 0.25rem; font-weight: 500; } .lz-fork-note, .lz-about-source { margin: 0.75rem 0 1rem; padding: 0.7rem 0.9rem; border: 1px solid var(--lz-line-strong); border-radius: var(--lz-radius-card); background: var(--lz-bg-raised); color: var(--lz-muted); font-size: 0.92rem; line-height: 1.45; } .lz-fork-note a, .lz-about-source a { color: var(--lz-brass); } .lz-about-source p { margin: 0; } app-block tr.lz-header-v2 td:first-child { color: var(--lz-muted); } .lz-sighash { display: inline-block; margin-left: 0.15rem; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.02em; color: var(--lz-brass); vertical-align: middle; } .sig.sighash-33, .sig.sighash-1 { color: var(--green, #3fb950); } .sig.sighash-34, .sig.sighash-2 { color: var(--lz-warn); } .sig.sighash-35, .sig.sighash-3 { color: var(--lz-steel); } #bitcoin-block-961640.blink-bg { box-shadow: 0 0 0 1px var(--lz-brass); } /* --- Lazarus dashboard card (theme.js dashboard()) -------------------------------------- */ /* Full-width row in the dashboard grid (the stock cols are 50% on md+). */ /* Plain .col from Bootstrap is one class too, and this file loads after it. */ .lz-col { flex: 0 0 100%; max-width: 100%; } .lz-card { text-align: left; } .lz-card .card-title { color: var(--lz-brass); text-align: center; margin-bottom: 0.9rem; } .lz-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.5rem; } @media (max-width: 575.98px) { .lz-grid { grid-template-columns: 1fr; gap: 1rem 0; } } .lz-block { min-width: 0; } .lz-block p { margin-bottom: 0.35rem; } .lz-kicker { font-family: var(--lz-mono); font-size: 0.68rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--lz-faint); } .lz-head { font-weight: 600; color: var(--lz-ink); line-height: 1.35; } .lz-endpoint { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; padding: 0.45rem 0.6rem; border: 1px solid var(--lz-line-strong); border-radius: var(--lz-radius-tight); background: var(--lz-bg-inset); } .lz-endpoint code { color: var(--lz-brass); font-size: 0.86rem; word-break: break-all; } .lz-copy { color: var(--lz-muted); font-size: 0.84rem; line-height: 1.45; } .lz-stats { display: flex; align-items: center; gap: 0.45rem; font-family: var(--lz-mono); font-size: 0.78rem; color: var(--lz-ink); } .lz-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--lz-faint); flex: 0 0 auto; } .lz-dot.live { background: var(--lz-good); box-shadow: 0 0 0 3px rgba(101, 201, 140, 0.2); } .lz-dot.stale { background: var(--lz-bad); box-shadow: 0 0 0 3px rgba(228, 113, 100, 0.2); } .lz-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; } .lz-actions .btn-sm { padding: 0.42rem 0.9rem; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.01em; } .lz-actions .btn-secondary:hover { border-color: var(--lz-brass) !important; color: var(--lz-brass) !important; } /* Copy button, same glyph as pool.css */ .lz-copy-btn { flex: 0 0 auto; width: 2rem; /* tap target */ height: 2rem; padding: 0; border: 1px solid var(--lz-line-strong); border-radius: var(--lz-radius-tight); background: var(--lz-bg-inset); color: var(--lz-muted); cursor: pointer; transition: color 140ms, border-color 140ms; } .lz-copy-btn::before { content: ""; display: block; width: 0.82rem; height: 0.82rem; margin: auto; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='5' y='5' width='8' height='9' rx='1' fill='none' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M3 11V3.5A1.5 1.5 0 0 1 4.5 2H11' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='5' y='5' width='8' height='9' rx='1' fill='none' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M3 11V3.5A1.5 1.5 0 0 1 4.5 2H11' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E") center / contain no-repeat; } .lz-copy-btn:hover { color: var(--lz-brass); border-color: var(--lz-brass); } .lz-copy-btn[data-copied] { color: var(--lz-good); border-color: var(--lz-good); animation: lz-copied 600ms ease-out 1; } /* One pulse when a copy lands; theme.js sets data-copied for 1.4s. */ @keyframes lz-copied { from { box-shadow: 0 0 0 0 rgba(101, 201, 140, 0.55); } to { box-shadow: 0 0 0 7px rgba(101, 201, 140, 0); } } .lz-copy-btn[data-copied]::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5 6.5 12 13 4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5 6.5 12 13 4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; } /* Angular Material / ng-bootstrap bits that show up on tx pages */ .modal-content { background-color: var(--lz-bg-raised) !important; border: 1px solid var(--lz-line-strong) !important; color: var(--lz-ink); border-radius: var(--lz-radius-card); } .close { color: var(--lz-ink); text-shadow: none; } /* Thin themed scrollbars: the standard properties, then the WebKit pseudo-elements. */ html { scrollbar-width: thin; scrollbar-color: var(--lz-line-strong) var(--lz-bg); } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--lz-bg); } ::-webkit-scrollbar-thumb { background: var(--lz-line-strong); border-radius: var(--lz-radius-pill); border: 2px solid var(--lz-bg); } ::-webkit-scrollbar-thumb:hover { background: var(--lz-brass-dim); } ::-webkit-scrollbar-corner { background: var(--lz-bg); } /* --- gateway bands in the mining-pool pie (theme.js drawBands) -------------------------- An overlay SVG sits on top of the ECharts pie, so it must stay out of layout: the chart div is already position:relative. Only the bands take the pointer, so the pie's own labels and leader lines stay hoverable. */ .chart svg.lz-bands, .chart-widget svg.lz-bands { position: absolute; left: 0; top: 0; z-index: 3; overflow: visible; pointer-events: none; } svg.lz-bands path { pointer-events: auto; cursor: pointer; stroke: var(--lz-bg); stroke-width: 0.75; } svg.lz-bands path:hover { stroke: var(--lz-brass); stroke-width: 1.1; } /* Slices are keyboard links (theme.js): the ring is the stroke, an outline would be a box. */ svg.lz-bands path:focus-visible { outline: none; stroke: var(--lz-brass); stroke-width: 2; } svg.lz-bands path.lz-band-catcher, svg.lz-bands path.lz-band-catcher:hover { fill: transparent; stroke: none; cursor: default; } /* Hovering a band: it brightens, everything belonging to another pool falls back, and the gateway's tag is written at the rim -- a band is a few pixels tall, so the ring and the label are what make it findable, not the band itself. */ svg.lz-bands path.lz-dim { opacity: 0.5; } svg.lz-bands path.lz-hot { filter: brightness(1.1) saturate(1.15); stroke: var(--lz-brass); stroke-width: 1.1; } svg.lz-bands path.lz-band-ring { fill: none; pointer-events: none; stroke: var(--lz-brass); stroke-width: 1.3; stroke-linejoin: round; } svg.lz-bands .lz-band-lead { fill: none; stroke: var(--lz-brass); stroke-width: 1; opacity: 0.75; } svg.lz-bands text.lz-band-label { fill: var(--lz-brass); font-family: var(--lz-mono); font-size: 0.76rem; font-weight: 600; } svg.lz-bands rect.lz-band-chip { fill: var(--lz-bg-raised); stroke: var(--lz-line-strong); stroke-width: 1; } .lz-band-tip { position: absolute; left: 0; top: 0; z-index: 6; display: none; max-width: min(21rem, calc(100vw - 2rem)); padding: 0.45rem 0.6rem; border: 1px solid var(--lz-line-strong); border-radius: 8px; background: var(--lz-bg-raised); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5); font-family: var(--lz-sans); font-size: 0.78rem; line-height: 1.4; color: var(--lz-ink); pointer-events: none; } .lz-band-tip[data-shown] { display: block; } .lz-band-tip b { display: block; color: var(--lz-brass); font-weight: 600; } .lz-band-tip span { display: block; font-family: var(--lz-mono); font-size: 0.72rem; color: var(--lz-muted); } .lz-band-tip .lz-band-sub { color: var(--lz-faint); } .lz-band-tip .lz-band-live { color: var(--lz-good); } .lz-bands-note { margin: 0.1rem auto 1rem; max-width: 44rem; text-align: center; font-size: 0.74rem; line-height: 1.5; color: var(--lz-faint); } .lz-bands-note b { color: var(--lz-muted); font-weight: 600; } /* --- fee box caption (theme.js feeNote) ------------------------------------------------ */ .lz-fee-note { margin: 8px 0 0; text-align: center; font-size: 0.74rem; line-height: 1.4; color: var(--lz-muted); } /* --- stock theme selector -------------------------------------------------------------- Its alternative palettes (contrast, softsimon, bukele) are stylesheets appended after this one, so picking one half-overrides the Lazarus theme. The element is the component's own tag, which is as stable a hook as the app offers. */ app-theme-selector { display: none !important; } /* --- small screens ------------------------------------------------------------------------ Below 992px the nav is a fixed bottom tab bar, below 576px everything is one column. */ /* The stock footer stacks its columns, centred, at 1019px and gives each 20px below through a component-scoped rule the injected column cannot match; do the same for it, and centre the Electrum row, which is a flex line and ignores text-align. */ @media (max-width: 1019px) { footer .lz-links { margin-bottom: 20px; } footer .lz-footer-endpoint { justify-content: center; flex-wrap: wrap; } } @media (max-width: 767.98px) { /* A wide free-layout table scrolls inside its own panel, not the page. (:has is progressive: without it the page behaves as it did before.) */ .box:has(> table.table:not(.table-fixed)), .box:has(> .table-responsive) { overflow-x: auto; } .lz-fork-note, .lz-about-source { overflow-wrap: anywhere; } } @media (max-width: 575.98px) { .navbar-brand { font-size: 1.45rem; } app-search-form .search-box-container .form-control { height: 2.4rem; font-size: 0.88rem; padding: 0 0.9rem; } app-search-form .btn { height: 2.4rem; } .lz-endpoint code { font-size: 0.8rem; } } /* --- reduced motion ----------------------------------------------------------------------- No transitions, no looping animation (skeleton sweep, flashing blocks, the fork block's pulse), and no backdrop blur, which is the expensive part of the header. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .sticky-header { background: var(--lz-bg) !important; } .sticky-header::after { backdrop-filter: none; -webkit-backdrop-filter: none; } }