ticker: redesign — news-wire aesthetic, drop the bright label box
The previous version used solid neon-green / neon-cyan blocks for the "Live Wire" / "On Calendar" labels which read as too aggressive against the otherwise dark-navy site. Replaced with a real news-wire look: - Pulse-dot indicator (animated breathing dot) + small-caps mono label on the left, separated from the feed by a thin rule. - Item codes (SONY / MTRX / NAB) become small bordered chips with subtle neon background tint instead of bare colored text. - Timestamps are mid-gray monospace; titles are clean Inter at 13px with slight letter-spacing. - Top + bottom of each bar get a hairline gradient (neon→cyan on row 1, dimmer cyan-only between rows) instead of a hard border. - Items are separated by faint vertical hairlines, padded consistently. - Marquee slowed slightly (110s / 170s) so titles are legible. Same data sources (news + events), same scroll directions, just better visual integration with the rest of the dark-navy site.
This commit is contained in:
Ryan Salazar
@@ -91,32 +91,110 @@
|
||||
animation-duration: 140s;
|
||||
}
|
||||
|
||||
/* Neon dual-ticker tokens — used ONLY inside DoubleTicker. */
|
||||
.bb-neon-bar {
|
||||
background: linear-gradient(180deg, rgba(0,0,0,0.55), rgba(5,10,8,0.55));
|
||||
border-top: 1px solid rgba(0,255,159,0.18);
|
||||
border-bottom: 1px solid rgba(0,255,159,0.18);
|
||||
/* ─── Dual-ticker (DoubleTicker.tsx) ──────────────────────────────────────
|
||||
News-wire aesthetic: pulse dot + small-caps label on the left, the
|
||||
feed scrolls in muted mid-gray with monospaced timestamps and a
|
||||
single neon accent on the source code. No bright label boxes —
|
||||
the neon shows up only as the pulse and on the code chip. */
|
||||
.bb-tick-bar {
|
||||
position: relative;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(8,12,10,0.92), rgba(10,14,12,0.92));
|
||||
border-top: 1px solid rgba(255,255,255,0.04);
|
||||
border-bottom: 1px solid rgba(255,255,255,0.04);
|
||||
}
|
||||
.bb-neon-bar + .bb-neon-bar {
|
||||
border-top: 1px solid rgba(0,212,255,0.10); /* faint divider between the two */
|
||||
.bb-tick-bar::before {
|
||||
/* thin neon hairline at the top of the FIRST bar only */
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0 0 auto 0;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, rgba(0,255,159,0.45), rgba(0,212,255,0.45), transparent);
|
||||
opacity: 0.65;
|
||||
}
|
||||
.bb-neon-label {
|
||||
background: #00ff9f;
|
||||
color: #050a08;
|
||||
font-weight: 700;
|
||||
.bb-tick-bar + .bb-tick-bar::before {
|
||||
/* divider between row 1 and row 2: dimmer + cyan-leaning */
|
||||
background: linear-gradient(90deg, transparent, rgba(0,212,255,0.25), transparent);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.bb-tick-label {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-family: 'IBM Plex Mono', ui-monospace, monospace;
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.15em;
|
||||
padding: 2px 8px;
|
||||
border-radius: 3px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.22em;
|
||||
text-transform: uppercase;
|
||||
color: #00ff9f;
|
||||
flex-shrink: 0;
|
||||
text-shadow: none;
|
||||
padding-right: 12px;
|
||||
border-right: 1px solid rgba(255,255,255,0.07);
|
||||
}
|
||||
.bb-neon-label--cyan {
|
||||
.bb-tick-label--cyan { color: #00d4ff; }
|
||||
|
||||
.bb-tick-pulse {
|
||||
display: inline-block;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: #00ff9f;
|
||||
box-shadow: 0 0 8px rgba(0,255,159,0.7);
|
||||
animation: bb-tick-blink 2.2s ease-in-out infinite;
|
||||
}
|
||||
.bb-tick-pulse--cyan {
|
||||
background: #00d4ff;
|
||||
box-shadow: 0 0 8px rgba(0,212,255,0.7);
|
||||
}
|
||||
.bb-neon-time { color: #707070; font-family: 'IBM Plex Mono', ui-monospace, monospace; }
|
||||
.bb-neon-code { color: #00ff9f; font-family: 'IBM Plex Mono', ui-monospace, monospace; }
|
||||
.bb-neon-code--cyan { color: #00d4ff; }
|
||||
.bb-neon-text { color: #d4d4d4; }
|
||||
.bb-neon-text:hover { color: #00ff9f; text-shadow: 0 0 8px rgba(0,255,159,0.4); }
|
||||
@keyframes bb-tick-blink {
|
||||
0%, 100% { opacity: 1; transform: scale(1); }
|
||||
50% { opacity: 0.45; transform: scale(0.85); }
|
||||
}
|
||||
|
||||
.bb-tick-time {
|
||||
color: #5a6470;
|
||||
font-family: 'IBM Plex Mono', ui-monospace, monospace;
|
||||
font-size: 11px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
.bb-tick-code {
|
||||
color: #00ff9f;
|
||||
font-family: 'IBM Plex Mono', ui-monospace, monospace;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
padding: 1px 5px;
|
||||
margin-right: 8px;
|
||||
border: 1px solid rgba(0,255,159,0.25);
|
||||
border-radius: 2px;
|
||||
background: rgba(0,255,159,0.06);
|
||||
}
|
||||
.bb-tick-code--cyan {
|
||||
color: #00d4ff;
|
||||
border-color: rgba(0,212,255,0.25);
|
||||
background: rgba(0,212,255,0.06);
|
||||
}
|
||||
.bb-tick-text {
|
||||
color: #c8ccd1;
|
||||
font-size: 13px;
|
||||
letter-spacing: 0.01em;
|
||||
font-weight: 400;
|
||||
}
|
||||
.bb-tick-text:hover {
|
||||
color: #ffffff;
|
||||
}
|
||||
.bb-tick-item {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0 24px 0 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.bb-tick-item + .bb-tick-item {
|
||||
border-left: 1px solid rgba(255,255,255,0.05);
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
/* Smoother marquee easing — keep the linear feel (real tickers are linear)
|
||||
but slightly slower so text is legible. */
|
||||
.bb-tick-bar .bb-marquee { animation-duration: 110s; }
|
||||
.bb-tick-bar .bb-marquee--slow { animation-duration: 170s; }
|
||||
|
||||
Reference in New Issue
Block a user