davide
88cba13e77
Rebuilt the purple color palette from scratch using a 4-level luminance scale (~3-5x jump per level: #06000f → #110028 → #1d0845 → #3a158a), matching the approach of high-contrast Bootswatch dark themes (Darkly, Cyborg). All contrast ratios are now WCAG-compliant: body text 16:1, card header white text 8.5:1, primary button 5.5:1. Chart axis improvements: Y-axis large numbers abbreviated (1.4M, 568K), X-axis max 6 ticks at 30° rotation, Inter font throughout, dark-glass tooltips, network_charts settings added to settings.json.tmpl with transparent canvas background
217 lines
7.2 KiB
SCSS
217 lines
7.2 KiB
SCSS
/* ============================================================
|
||
BitcoinPurple Explorer – explorer-specific component styles
|
||
The base dark theme is in themes/purple/_bootswatch.scss.
|
||
This file adds only what Bootstrap + bootswatch don't cover.
|
||
============================================================ */
|
||
|
||
/* ── CSS vars (available to JS and inline styles) ────────────── */
|
||
:root {
|
||
--btcp-bg: #06000f;
|
||
--btcp-surface: #110028;
|
||
--btcp-card: #1d0845;
|
||
--btcp-header: #3a158a;
|
||
--btcp-border: #7c3aed;
|
||
--btcp-accent: #9333ea;
|
||
--btcp-bright: #a855f7;
|
||
--btcp-label: #c084fc;
|
||
--btcp-text: #ece0ff;
|
||
--btcp-text-dim: #9d6ae8;
|
||
--btcp-glow: 0 0 14px rgba(147,51,234,.5), 0 0 40px rgba(147,51,234,.18);
|
||
--btcp-glow-sm: 0 0 8px rgba(147,51,234,.4);
|
||
--radius: .55rem;
|
||
--radius-pill: 50rem;
|
||
}
|
||
|
||
/* ── Search bar ──────────────────────────────────────────────── */
|
||
.search-box-custom, #index-search, #search-row { padding: .75rem 0; }
|
||
|
||
.search-for,
|
||
#index-search .form-group {
|
||
width: 100%;
|
||
max-width: 680px;
|
||
margin: 0 auto;
|
||
position: relative;
|
||
}
|
||
|
||
/* Input field */
|
||
.search-for .form-control,
|
||
#index-search input.form-control {
|
||
background: var(--btcp-surface) !important;
|
||
border: 1.5px solid var(--btcp-border) !important;
|
||
border-right: none !important;
|
||
border-radius: var(--radius-pill) 0 0 var(--radius-pill) !important;
|
||
color: #fff !important;
|
||
padding: .6rem 1.25rem .6rem 2.6rem !important;
|
||
font-size: .95rem;
|
||
font-weight: 500;
|
||
height: 44px;
|
||
caret-color: var(--btcp-label);
|
||
transition: border-color .2s, box-shadow .2s;
|
||
}
|
||
.search-for .form-control:focus,
|
||
#index-search input.form-control:focus {
|
||
border-color: var(--btcp-accent) !important;
|
||
box-shadow: 0 0 0 3px rgba(147,51,234,.28) !important;
|
||
background: #16003a !important;
|
||
color: #fff !important;
|
||
outline: none;
|
||
}
|
||
.search-for .form-control::placeholder,
|
||
#index-search input.form-control::placeholder {
|
||
color: rgba(192,132,252,.7);
|
||
}
|
||
|
||
/* Search icon */
|
||
.search-for::before {
|
||
content: "⌕";
|
||
position: absolute;
|
||
left: 1rem;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
color: var(--btcp-label);
|
||
font-size: 1.1rem;
|
||
pointer-events: none;
|
||
z-index: 5;
|
||
}
|
||
|
||
/* btn-success → purple (used as search button) */
|
||
.btn-success,
|
||
.btn-success:not(:disabled):not(.disabled) {
|
||
background: linear-gradient(135deg, var(--btcp-border), var(--btcp-accent)) !important;
|
||
border: none !important;
|
||
color: #fff !important;
|
||
font-weight: 600;
|
||
box-shadow: var(--btcp-glow-sm);
|
||
transition: all .2s ease;
|
||
}
|
||
.btn-success:hover,
|
||
.btn-success:focus {
|
||
background: linear-gradient(135deg, var(--btcp-accent), var(--btcp-bright)) !important;
|
||
box-shadow: var(--btcp-glow) !important;
|
||
transform: translateY(-1px);
|
||
}
|
||
.btn-success:active { transform: translateY(0); }
|
||
|
||
.search-for .btn-success,
|
||
#index-search .btn-success {
|
||
border-radius: 0 var(--radius-pill) var(--radius-pill) 0 !important;
|
||
padding: .6rem 1.5rem !important;
|
||
height: 44px;
|
||
font-size: .9rem;
|
||
}
|
||
|
||
/* ── Stat panels (header area) ───────────────────────────────── */
|
||
.panel-box,
|
||
.card.panel,
|
||
.stat-panel {
|
||
border: 1px solid rgba(124,58,237,.55) !important;
|
||
background: var(--btcp-card) !important;
|
||
border-radius: var(--radius) !important;
|
||
transition: transform .18s, box-shadow .18s;
|
||
}
|
||
.panel-box:hover,
|
||
.card.panel:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: var(--btcp-glow) !important;
|
||
}
|
||
|
||
/* Big numbers */
|
||
.panel-box .panel-value,
|
||
.card .display-4,
|
||
.card h3, .card .h3 {
|
||
color: #fff !important;
|
||
font-weight: 700;
|
||
}
|
||
|
||
/* Labels */
|
||
.panel-box .panel-label,
|
||
.card .card-title,
|
||
.card small {
|
||
color: var(--btcp-label) !important;
|
||
font-size: .73rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: .09em;
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* ── Text helpers ────────────────────────────────────────────── */
|
||
body { color: var(--btcp-text) !important; }
|
||
.card-body, .panel-body { color: var(--btcp-text) !important; }
|
||
p, li, span, div, td, th, label { color: inherit; }
|
||
|
||
.text-muted, small, .small {
|
||
color: var(--btcp-text-dim) !important;
|
||
opacity: 1 !important;
|
||
}
|
||
|
||
/* ── Hash / monospace links in tables ────────────────────────── */
|
||
.table td a {
|
||
font-family: "SF Mono", "Fira Code", monospace;
|
||
font-size: .8rem;
|
||
}
|
||
|
||
/* ── Status badges ───────────────────────────────────────────── */
|
||
.text-success { color: #4ade80 !important; }
|
||
.text-danger { color: #f87171 !important; }
|
||
.text-warning { color: #fbbf24 !important; }
|
||
|
||
/* ── Loading bar ─────────────────────────────────────────────── */
|
||
#loading-bar, .loading-bar, #nprogress .bar {
|
||
background: linear-gradient(90deg, var(--btcp-border), var(--btcp-label)) !important;
|
||
box-shadow: 0 0 8px var(--btcp-accent);
|
||
}
|
||
|
||
/* ── Chart canvas subtle glow ────────────────────────────────── */
|
||
canvas {
|
||
filter: drop-shadow(0 0 4px rgba(147,51,234,.12));
|
||
}
|
||
|
||
/* ── Network chart card overrides ────────────────────────────── */
|
||
#nethashChartParent,
|
||
#difficultyChartParent {
|
||
.card { background: var(--btcp-card) !important; overflow: hidden; }
|
||
.card-header {
|
||
background: var(--btcp-header) !important;
|
||
border-bottom: 2px solid var(--btcp-border) !important;
|
||
padding: .6rem 1rem !important;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: .5rem;
|
||
|
||
&::before {
|
||
content: '';
|
||
display: inline-block;
|
||
width: 3px;
|
||
height: 14px;
|
||
border-radius: 2px;
|
||
background: linear-gradient(180deg, var(--btcp-label), var(--btcp-accent));
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
strong {
|
||
color: #fff !important;
|
||
font-size: .78rem;
|
||
letter-spacing: .08em;
|
||
text-transform: uppercase;
|
||
font-weight: 700;
|
||
}
|
||
}
|
||
.card-body { padding: .75rem !important; }
|
||
canvas { display: block; border-radius: .3rem; }
|
||
}
|
||
|
||
/* ── Scrollbar ───────────────────────────────────────────────── */
|
||
* { scrollbar-width: thin; scrollbar-color: var(--btcp-border) var(--btcp-bg); }
|
||
::-webkit-scrollbar { width: 5px; height: 5px; }
|
||
::-webkit-scrollbar-track { background: var(--btcp-bg); }
|
||
::-webkit-scrollbar-thumb { background: var(--btcp-border); border-radius: 99px; }
|
||
::-webkit-scrollbar-thumb:hover { background: var(--btcp-accent); }
|
||
|
||
/* ── Tooltip ─────────────────────────────────────────────────── */
|
||
.tooltip-inner {
|
||
background: var(--btcp-card) !important;
|
||
border: 1px solid var(--btcp-border);
|
||
color: var(--btcp-text);
|
||
font-size: .8rem;
|
||
}
|