Skip to content

Commit ba6fe03

Browse files
btcnevesbtcneves
committed
style: add professional btcneves theme
1 parent 7db5d94 commit ba6fe03

1 file changed

Lines changed: 374 additions & 0 deletions

File tree

‎frontend/src/professional-theme.css‎

Lines changed: 374 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,374 @@
1+
:root {
2+
--bg: #070604;
3+
--surface: #11100c;
4+
--surface-2: #18140e;
5+
--border: rgba(247, 147, 26, 0.24);
6+
--border-strong: rgba(247, 147, 26, 0.46);
7+
--text: #fff7e8;
8+
--muted: #b9a88f;
9+
--accent: #f7931a;
10+
--accent-bright: #ffb347;
11+
--warn: #ffd166;
12+
--error: #ff5c5c;
13+
--blue: #f7931a;
14+
--terminal-green: #7cffb2;
15+
--shadow-orange: 0 20px 80px rgba(247, 147, 26, 0.12);
16+
--font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
17+
--font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
18+
}
19+
20+
html {
21+
background: var(--bg);
22+
}
23+
24+
body {
25+
background:
26+
radial-gradient(circle at 18% 0%, rgba(247, 147, 26, 0.16), transparent 30rem),
27+
radial-gradient(circle at 86% 14%, rgba(255, 179, 71, 0.1), transparent 28rem),
28+
linear-gradient(180deg, #0a0805 0%, #070604 45%, #0f0b06 100%);
29+
color: var(--text);
30+
font-family: var(--font-sans);
31+
letter-spacing: -0.01em;
32+
}
33+
34+
body::before {
35+
content: '';
36+
position: fixed;
37+
inset: 0;
38+
pointer-events: none;
39+
background-image:
40+
linear-gradient(rgba(247, 147, 26, 0.055) 1px, transparent 1px),
41+
linear-gradient(90deg, rgba(247, 147, 26, 0.055) 1px, transparent 1px);
42+
background-size: 44px 44px;
43+
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.85), transparent 78%);
44+
z-index: 0;
45+
}
46+
47+
.app {
48+
position: relative;
49+
z-index: 1;
50+
}
51+
52+
.header {
53+
min-height: 68px;
54+
padding: 12px 22px !important;
55+
background: rgba(10, 8, 5, 0.84) !important;
56+
border-bottom: 1px solid var(--border-strong) !important;
57+
backdrop-filter: blur(18px);
58+
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.28);
59+
}
60+
61+
.header-brand {
62+
gap: 14px;
63+
}
64+
65+
.header-brand::before {
66+
content: '₿';
67+
width: 34px;
68+
height: 34px;
69+
display: inline-grid;
70+
place-items: center;
71+
border: 1px solid var(--border-strong);
72+
border-radius: 999px;
73+
background: radial-gradient(circle at 35% 25%, #ffd18a, var(--accent) 55%, #8d4b06 100%);
74+
color: #120b02;
75+
font-weight: 900;
76+
box-shadow: 0 0 28px rgba(247, 147, 26, 0.32);
77+
}
78+
79+
.header-title {
80+
font-family: var(--font-mono);
81+
font-size: 18px;
82+
letter-spacing: -0.04em;
83+
text-transform: lowercase;
84+
}
85+
86+
.header-title::before {
87+
content: 'btcneves ~ ';
88+
color: var(--accent);
89+
}
90+
91+
.header-title::after {
92+
content: '|';
93+
margin-left: 2px;
94+
color: var(--accent-bright);
95+
animation: cursor-blink 1.1s steps(2, start) infinite;
96+
}
97+
98+
@keyframes cursor-blink {
99+
0%, 44% { opacity: 1; }
100+
45%, 100% { opacity: 0; }
101+
}
102+
103+
.header-nav {
104+
gap: 7px !important;
105+
}
106+
107+
.header-nav button,
108+
.status-dots button,
109+
.refresh-btn,
110+
.pres-btn {
111+
border-radius: 999px !important;
112+
border: 1px solid var(--border) !important;
113+
background: rgba(247, 147, 26, 0.055) !important;
114+
color: var(--muted) !important;
115+
font-family: var(--font-mono) !important;
116+
letter-spacing: -0.02em;
117+
transition:
118+
border-color 0.18s ease,
119+
background 0.18s ease,
120+
color 0.18s ease,
121+
transform 0.18s ease,
122+
box-shadow 0.18s ease !important;
123+
}
124+
125+
.header-nav button:hover,
126+
.status-dots button:hover,
127+
.refresh-btn:hover,
128+
.pres-btn:hover {
129+
color: var(--text) !important;
130+
border-color: var(--accent) !important;
131+
background: rgba(247, 147, 26, 0.14) !important;
132+
transform: translateY(-1px);
133+
}
134+
135+
.header-nav button[style*='rgb(29, 78, 216)'],
136+
.header-nav button[style*='#1d4ed8'],
137+
.status-dots button[style*='rgb(29, 78, 216)'],
138+
.status-dots button[style*='#1d4ed8'] {
139+
background: linear-gradient(135deg, var(--accent), var(--accent-bright)) !important;
140+
border-color: rgba(255, 209, 138, 0.85) !important;
141+
color: #160d02 !important;
142+
box-shadow: 0 0 22px rgba(247, 147, 26, 0.18) !important;
143+
}
144+
145+
.main {
146+
max-width: 1280px;
147+
padding-top: 34px;
148+
}
149+
150+
.main::before {
151+
content: 'btcneves@nodescope:~$ inspect bitcoin-core\AProfessional Bitcoin Core observability lab for RPC, ZMQ, mempool policy and proof reports.';
152+
display: block;
153+
white-space: pre-line;
154+
margin: 0 0 22px;
155+
padding: 28px;
156+
border: 1px solid var(--border-strong);
157+
border-radius: 28px;
158+
background:
159+
linear-gradient(135deg, rgba(247, 147, 26, 0.16), rgba(247, 147, 26, 0.025) 58%),
160+
rgba(12, 10, 7, 0.72);
161+
box-shadow: var(--shadow-orange);
162+
color: var(--text);
163+
font-size: clamp(26px, 4vw, 48px);
164+
line-height: 1.05;
165+
font-weight: 850;
166+
letter-spacing: -0.07em;
167+
}
168+
169+
.main::first-line {
170+
color: var(--accent-bright);
171+
font-family: var(--font-mono);
172+
font-size: 15px;
173+
font-weight: 700;
174+
letter-spacing: -0.03em;
175+
}
176+
177+
.panel,
178+
.kpi-card,
179+
.pres-top-row,
180+
.explain-box,
181+
.alerting-panel,
182+
.lifecycle-panel {
183+
background:
184+
linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),
185+
rgba(17, 16, 12, 0.88) !important;
186+
border: 1px solid var(--border) !important;
187+
border-radius: 22px !important;
188+
box-shadow: 0 18px 54px rgba(0, 0, 0, 0.24);
189+
backdrop-filter: blur(10px);
190+
}
191+
192+
.panel {
193+
overflow: hidden;
194+
}
195+
196+
.panel-header,
197+
.panel-title {
198+
border-bottom: 1px solid var(--border) !important;
199+
background: rgba(247, 147, 26, 0.035);
200+
}
201+
202+
.panel-title,
203+
.kpi-label,
204+
.mempool-label,
205+
.panel-key,
206+
.event-time,
207+
.status-dot,
208+
.intelligence-key,
209+
.sync-label {
210+
color: var(--muted) !important;
211+
}
212+
213+
.panel-title,
214+
.kpi-label,
215+
.mempool-label {
216+
font-family: var(--font-mono);
217+
text-transform: lowercase;
218+
letter-spacing: -0.02em;
219+
}
220+
221+
.panel-title::before,
222+
.kpi-label::before,
223+
.mempool-label::before {
224+
content: '~ ';
225+
color: var(--accent);
226+
}
227+
228+
.kpi-row,
229+
.grid-2,
230+
.grid-3 {
231+
gap: 18px;
232+
}
233+
234+
.kpi-card {
235+
position: relative;
236+
overflow: hidden;
237+
}
238+
239+
.kpi-card::after {
240+
content: '';
241+
position: absolute;
242+
inset: auto 18px 0;
243+
height: 2px;
244+
background: linear-gradient(90deg, transparent, var(--accent), transparent);
245+
opacity: 0.38;
246+
}
247+
248+
.kpi-value,
249+
.mempool-value,
250+
.panel-val,
251+
.sync-rpc,
252+
.sync-zmq,
253+
.event-hash,
254+
.mono,
255+
.intelligence-mono {
256+
font-family: var(--font-mono) !important;
257+
}
258+
259+
.kpi-value,
260+
.mempool-value,
261+
.intelligence-score-value,
262+
.pres-title {
263+
color: var(--accent-bright) !important;
264+
text-shadow: 0 0 24px rgba(247, 147, 26, 0.18);
265+
}
266+
267+
.badge {
268+
border: 1px solid currentColor;
269+
background: rgba(247, 147, 26, 0.12) !important;
270+
color: var(--accent-bright) !important;
271+
font-family: var(--font-mono);
272+
}
273+
274+
.badge-regtest,
275+
.badge-mainnet,
276+
.badge-signet,
277+
.badge-testnet,
278+
.badge-rawtx,
279+
.badge-rawblock,
280+
.badge-block,
281+
.badge-payment,
282+
.badge-coinbase,
283+
.badge-health-healthy {
284+
background: rgba(247, 147, 26, 0.12) !important;
285+
color: var(--accent-bright) !important;
286+
}
287+
288+
.dot-ok,
289+
.live-dot,
290+
.lifecycle-step--active .lifecycle-dot,
291+
.lifecycle-step--active-vert.lifecycle-step--active .lifecycle-dot {
292+
background: var(--accent-bright) !important;
293+
border-color: var(--accent-bright) !important;
294+
box-shadow: 0 0 14px rgba(247, 147, 26, 0.9) !important;
295+
}
296+
297+
.event-row,
298+
.panel-row,
299+
.intelligence-row,
300+
.sync-row,
301+
.mempool-item {
302+
border-color: rgba(247, 147, 26, 0.14) !important;
303+
}
304+
305+
.event-row:hover,
306+
.panel-row:hover,
307+
.intelligence-row:hover {
308+
background: rgba(247, 147, 26, 0.055) !important;
309+
}
310+
311+
input,
312+
select,
313+
textarea {
314+
background: rgba(7, 6, 4, 0.78) !important;
315+
color: var(--text) !important;
316+
border: 1px solid var(--border) !important;
317+
border-radius: 12px !important;
318+
font-family: var(--font-mono) !important;
319+
}
320+
321+
input:focus,
322+
select:focus,
323+
textarea:focus,
324+
button:focus-visible {
325+
outline: 2px solid rgba(247, 147, 26, 0.42) !important;
326+
outline-offset: 2px;
327+
}
328+
329+
button:not(.header-nav button):not(.refresh-btn):not(.status-dots button) {
330+
border-radius: 999px;
331+
}
332+
333+
.copy-feedback,
334+
.live-indicator,
335+
.sync-ok,
336+
.intelligence-pressure--low {
337+
color: var(--accent-bright) !important;
338+
}
339+
340+
.footer,
341+
footer {
342+
color: var(--muted) !important;
343+
border-top-color: var(--border) !important;
344+
}
345+
346+
::-webkit-scrollbar-thumb {
347+
background: rgba(247, 147, 26, 0.42);
348+
}
349+
350+
* {
351+
scrollbar-color: rgba(247, 147, 26, 0.42) transparent;
352+
}
353+
354+
@media (max-width: 700px) {
355+
.header {
356+
min-height: auto;
357+
padding: 10px 14px !important;
358+
}
359+
360+
.main {
361+
padding: 18px 14px;
362+
}
363+
364+
.main::before {
365+
padding: 22px;
366+
border-radius: 22px;
367+
font-size: 30px;
368+
}
369+
370+
.header-brand::before {
371+
width: 30px;
372+
height: 30px;
373+
}
374+
}

0 commit comments

Comments
 (0)