mirror of
https://github.com/BigBodyCobain/Shadowbroker.git
synced 2026-06-07 14:53:53 +02:00
style: terminal reskin — Infonet aesthetic for main dashboard
- JetBrains Mono as primary body font - Backgrounds: pure black → #0a0a0a (warmer dark) - Borders: opacity 0.18 → 0.30 (more visible panel edges) - Body text: near-white → gray-300 (softer terminal feel) - Scanline overlay: 5% → 8% opacity - Text glow: double-layer shadow, increased intensity - All panel containers: bg-[#0a0a0a]/90 border-cyan-900/40 - Map popup titles: uppercase + tracking - Matrix HUD theme: updated border baselines to match Rollback: git reset --hard backup-pre-terminal-reskin
This commit is contained in:
anoracleofra-code
@@ -1,22 +1,22 @@
|
||||
@import 'tailwindcss';
|
||||
|
||||
:root {
|
||||
--background: #000000;
|
||||
--foreground: #ededed;
|
||||
--bg-primary: #000000;
|
||||
--bg-secondary: rgb(5, 5, 8);
|
||||
--bg-tertiary: rgb(12, 12, 16);
|
||||
--bg-panel: rgba(0, 0, 0, 0.85);
|
||||
--border-primary: rgba(8, 145, 178, 0.18);
|
||||
--border-secondary: rgba(8, 145, 178, 0.30);
|
||||
--border-glow: rgba(6, 182, 212, 0.12);
|
||||
--text-primary: rgb(243, 244, 246);
|
||||
--background: #0a0a0a;
|
||||
--foreground: #d1d5db;
|
||||
--bg-primary: #0a0a0a;
|
||||
--bg-secondary: #080808;
|
||||
--bg-tertiary: #0f0f0f;
|
||||
--bg-panel: rgba(10, 10, 10, 0.92);
|
||||
--border-primary: rgba(8, 145, 178, 0.30);
|
||||
--border-secondary: rgba(8, 145, 178, 0.45);
|
||||
--border-glow: rgba(6, 182, 212, 0.18);
|
||||
--text-primary: rgb(209, 213, 219);
|
||||
--text-secondary: rgb(34, 211, 238);
|
||||
--text-muted: rgb(8, 145, 178);
|
||||
--text-heading: rgb(236, 254, 255);
|
||||
--text-heading: rgb(207, 250, 254);
|
||||
--hover-accent: rgba(8, 51, 68, 0.2);
|
||||
--scrollbar-thumb: rgba(255, 255, 255, 0.12);
|
||||
--scrollbar-thumb-hover: rgba(255, 255, 255, 0.25);
|
||||
--scrollbar-thumb: rgba(255, 255, 255, 0.15);
|
||||
--scrollbar-thumb-hover: rgba(255, 255, 255, 0.28);
|
||||
--font-geist-sans:
|
||||
ui-sans-serif, system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, 'Noto Sans',
|
||||
sans-serif;
|
||||
@@ -27,22 +27,22 @@
|
||||
|
||||
/* Light theme: only the map basemap changes — UI stays dark */
|
||||
[data-theme='light'] {
|
||||
--background: #000000;
|
||||
--foreground: #ededed;
|
||||
--bg-primary: #000000;
|
||||
--bg-secondary: rgb(5, 5, 8);
|
||||
--bg-tertiary: rgb(12, 12, 16);
|
||||
--bg-panel: rgba(0, 0, 0, 0.85);
|
||||
--border-primary: rgba(8, 145, 178, 0.18);
|
||||
--border-secondary: rgba(8, 145, 178, 0.30);
|
||||
--border-glow: rgba(6, 182, 212, 0.12);
|
||||
--text-primary: rgb(243, 244, 246);
|
||||
--background: #0a0a0a;
|
||||
--foreground: #d1d5db;
|
||||
--bg-primary: #0a0a0a;
|
||||
--bg-secondary: #080808;
|
||||
--bg-tertiary: #0f0f0f;
|
||||
--bg-panel: rgba(10, 10, 10, 0.92);
|
||||
--border-primary: rgba(8, 145, 178, 0.30);
|
||||
--border-secondary: rgba(8, 145, 178, 0.45);
|
||||
--border-glow: rgba(6, 182, 212, 0.18);
|
||||
--text-primary: rgb(209, 213, 219);
|
||||
--text-secondary: rgb(34, 211, 238);
|
||||
--text-muted: rgb(8, 145, 178);
|
||||
--text-heading: rgb(236, 254, 255);
|
||||
--text-heading: rgb(207, 250, 254);
|
||||
--hover-accent: rgba(8, 51, 68, 0.2);
|
||||
--scrollbar-thumb: rgba(255, 255, 255, 0.12);
|
||||
--scrollbar-thumb-hover: rgba(255, 255, 255, 0.25);
|
||||
--scrollbar-thumb: rgba(255, 255, 255, 0.15);
|
||||
--scrollbar-thumb-hover: rgba(255, 255, 255, 0.28);
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
@@ -55,7 +55,7 @@
|
||||
body {
|
||||
background: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: var(--font-roboto-mono), 'Roboto Mono', monospace;
|
||||
font-family: 'JetBrains Mono', var(--font-roboto-mono), 'Roboto Mono', monospace;
|
||||
}
|
||||
|
||||
/* Global interactive cursor hints */
|
||||
@@ -116,30 +116,30 @@ textarea:disabled {
|
||||
|
||||
/* Subtle text glow for cyan headings */
|
||||
.text-glow {
|
||||
text-shadow: 0 0 8px rgba(34, 211, 238, 0.3);
|
||||
text-shadow: 0 0 10px rgba(34, 211, 238, 0.45), 0 0 20px rgba(34, 211, 238, 0.15);
|
||||
}
|
||||
|
||||
/* Terminal input — prompt style */
|
||||
.terminal-input {
|
||||
border-radius: 0;
|
||||
border: 1px solid rgba(8, 145, 178, 0.25);
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
border: 1px solid rgba(8, 145, 178, 0.35);
|
||||
background: rgba(10, 10, 10, 0.5);
|
||||
}
|
||||
.terminal-input:focus {
|
||||
border-color: rgba(34, 211, 238, 0.5);
|
||||
box-shadow: 0 0 6px rgba(34, 211, 238, 0.15);
|
||||
box-shadow: 0 0 8px rgba(34, 211, 238, 0.2);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Map popup shared utilities */
|
||||
.map-popup {
|
||||
background: rgba(10, 14, 26, 0.95);
|
||||
background: rgba(10, 14, 20, 0.96);
|
||||
border-radius: 2px;
|
||||
border: 1px solid rgba(8, 145, 178, 0.25);
|
||||
border: 1px solid rgba(8, 145, 178, 0.35);
|
||||
padding: 10px 14px;
|
||||
color: #e0e6f0;
|
||||
color: #d1d5db;
|
||||
font-family:
|
||||
var(--font-roboto-mono), 'Roboto Mono', monospace, 'Microsoft YaHei', 'PingFang SC',
|
||||
'JetBrains Mono', var(--font-roboto-mono), 'Roboto Mono', monospace, 'Microsoft YaHei', 'PingFang SC',
|
||||
'Noto Sans SC', 'Noto Sans JP', 'Noto Sans KR', sans-serif;
|
||||
font-size: 11px;
|
||||
min-width: 220px;
|
||||
@@ -150,7 +150,8 @@ textarea:disabled {
|
||||
font-weight: 700;
|
||||
font-size: 13px;
|
||||
margin-bottom: 6px;
|
||||
letter-spacing: 1px;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.map-popup-row {
|
||||
@@ -185,12 +186,12 @@ textarea:disabled {
|
||||
--hover-accent: rgba(5, 46, 22, 0.2);
|
||||
--scrollbar-thumb: rgba(255, 255, 255, 0.12);
|
||||
--scrollbar-thumb-hover: rgba(255, 255, 255, 0.25);
|
||||
--border-primary: rgba(22, 163, 74, 0.18);
|
||||
--border-secondary: rgba(22, 163, 74, 0.30);
|
||||
--border-glow: rgba(34, 197, 94, 0.12);
|
||||
--border-primary: rgba(22, 163, 74, 0.30);
|
||||
--border-secondary: rgba(22, 163, 74, 0.45);
|
||||
--border-glow: rgba(34, 197, 94, 0.18);
|
||||
}
|
||||
[data-hud='matrix'] .hud-zone .text-glow {
|
||||
text-shadow: 0 0 8px rgba(74, 222, 128, 0.3);
|
||||
text-shadow: 0 0 10px rgba(74, 222, 128, 0.45), 0 0 20px rgba(74, 222, 128, 0.15);
|
||||
}
|
||||
|
||||
/* --- Text color overrides --- */
|
||||
|
||||
@@ -722,7 +722,7 @@ export default function Dashboard() {
|
||||
>
|
||||
<button
|
||||
onClick={() => setLeftOpen(!leftOpen)}
|
||||
className="flex flex-col items-center gap-1.5 py-5 px-1.5 bg-cyan-950/40 border border-cyan-800/30 border-l-0 rounded-r text-cyan-700 hover:text-cyan-400 hover:bg-cyan-950/60 hover:border-cyan-500/40 transition-colors"
|
||||
className="flex flex-col items-center gap-1.5 py-5 px-1.5 bg-cyan-950/40 border border-cyan-800/50 border-l-0 rounded-r text-cyan-700 hover:text-cyan-400 hover:bg-cyan-950/60 hover:border-cyan-500/40 transition-colors"
|
||||
>
|
||||
{leftOpen ? <ChevronLeft size={10} /> : <ChevronRight size={10} />}
|
||||
<span
|
||||
@@ -742,7 +742,7 @@ export default function Dashboard() {
|
||||
>
|
||||
<button
|
||||
onClick={() => setRightOpen(!rightOpen)}
|
||||
className="flex flex-col items-center gap-1.5 py-5 px-1.5 bg-cyan-950/40 border border-cyan-800/30 border-r-0 rounded-l text-cyan-700 hover:text-cyan-400 hover:bg-cyan-950/60 hover:border-cyan-500/40 transition-colors"
|
||||
className="flex flex-col items-center gap-1.5 py-5 px-1.5 bg-cyan-950/40 border border-cyan-800/50 border-r-0 rounded-l text-cyan-700 hover:text-cyan-400 hover:bg-cyan-950/60 hover:border-cyan-500/40 transition-colors"
|
||||
>
|
||||
{rightOpen ? <ChevronRight size={10} /> : <ChevronLeft size={10} />}
|
||||
<span
|
||||
@@ -837,7 +837,7 @@ export default function Dashboard() {
|
||||
/>
|
||||
|
||||
<div
|
||||
className="bg-[var(--bg-primary)]/80 border border-[var(--border-primary)] px-5 py-1.5 flex items-center gap-5 border-b-2 border-b-cyan-900 cursor-pointer"
|
||||
className="bg-[#0a0a0a]/90 border border-cyan-900/40 px-5 py-1.5 flex items-center gap-5 border-b-2 border-b-cyan-800 cursor-pointer backdrop-blur-sm"
|
||||
onClick={cycleStyle}
|
||||
>
|
||||
{/* Coordinates */}
|
||||
@@ -949,7 +949,7 @@ export default function Dashboard() {
|
||||
|
||||
{/* SCANLINES OVERLAY */}
|
||||
<div
|
||||
className="absolute inset-0 pointer-events-none z-[3] opacity-5 bg-[linear-gradient(rgba(255,255,255,0.1)_1px,transparent_1px)]"
|
||||
className="absolute inset-0 pointer-events-none z-[3] opacity-[0.08] bg-[linear-gradient(rgba(255,255,255,0.1)_1px,transparent_1px)]"
|
||||
style={{ backgroundSize: '100% 4px' }}
|
||||
></div>
|
||||
|
||||
@@ -1107,7 +1107,7 @@ export default function Dashboard() {
|
||||
>
|
||||
<button
|
||||
onClick={() => setTickerOpen(!tickerOpen)}
|
||||
className="flex items-center gap-2 px-3 py-1 bg-cyan-950/40 border border-cyan-800/30 border-b-0 rounded-t text-cyan-700 hover:text-cyan-400 hover:bg-cyan-950/60 hover:border-cyan-500/40 transition-colors"
|
||||
className="flex items-center gap-2 px-3 py-1 bg-cyan-950/40 border border-cyan-800/50 border-b-0 rounded-t text-cyan-700 hover:text-cyan-400 hover:bg-cyan-950/60 hover:border-cyan-500/40 transition-colors"
|
||||
>
|
||||
<div className="text-[7.5px] font-mono tracking-[0.25em] font-bold uppercase">
|
||||
MARKETS
|
||||
|
||||
@@ -300,7 +300,7 @@ const FilterPanel = React.memo(function FilterPanel({ activeFilters, setActiveFi
|
||||
initial={{ y: -30, opacity: 0 }}
|
||||
animate={{ y: 0, opacity: 1 }}
|
||||
transition={{ duration: 0.6, delay: 0.3 }}
|
||||
className="w-full bg-[var(--bg-primary)]/40 backdrop-blur-sm border border-[var(--border-primary)] z-10 flex flex-col font-mono text-sm pointer-events-auto flex-shrink-0"
|
||||
className="w-full bg-[#0a0a0a]/90 backdrop-blur-sm border border-cyan-900/40 z-10 flex flex-col font-mono text-sm pointer-events-auto flex-shrink-0"
|
||||
>
|
||||
{/* Header Toggle */}
|
||||
<div
|
||||
|
||||
@@ -175,7 +175,7 @@ const FindLocateBar = React.memo(function FindLocateBar({ onLocate, onFilter }:
|
||||
|
||||
return (
|
||||
<div ref={containerRef} className="relative w-full pointer-events-auto">
|
||||
<div className="flex items-center gap-2 bg-[var(--bg-primary)]/40 backdrop-blur-sm border border-[var(--border-primary)] px-3 py-2 focus-within:border-cyan-500/40 transition-colors">
|
||||
<div className="flex items-center gap-2 bg-[#0a0a0a]/90 backdrop-blur-sm border border-cyan-900/40 px-3 py-2 focus-within:border-cyan-500/40 transition-colors">
|
||||
<Search size={12} className="text-slate-500 flex-shrink-0" />
|
||||
<input
|
||||
ref={inputRef}
|
||||
|
||||
@@ -44,7 +44,7 @@ export default function GlobalTicker() {
|
||||
|
||||
return (
|
||||
<div
|
||||
className="absolute bottom-0 left-0 right-0 h-7 bg-black/95 border-t border-[var(--border-primary)] shadow-[0_-5px_15px_rgba(0,0,0,0.6)] z-[8000] flex items-center overflow-hidden pointer-events-auto backdrop-blur-xl"
|
||||
className="absolute bottom-0 left-0 right-0 h-7 bg-[#0a0a0a]/95 border-t border-cyan-900/40 shadow-[0_-5px_15px_rgba(0,0,0,0.6)] z-[8000] flex items-center overflow-hidden pointer-events-auto backdrop-blur-xl"
|
||||
>
|
||||
|
||||
{fallback && (
|
||||
|
||||
@@ -264,7 +264,7 @@ const MarketsPanel = React.memo(function MarketsPanel({ data, focused, onFocusCh
|
||||
initial={{ y: -50, opacity: 0 }}
|
||||
animate={{ y: 0, opacity: 1 }}
|
||||
transition={{ duration: 0.8, delay: 0.2 }}
|
||||
className="w-full bg-[var(--bg-primary)]/40 backdrop-blur-sm border border-[var(--border-primary)] z-10 flex flex-col font-mono text-sm pointer-events-auto flex-shrink-0"
|
||||
className="w-full bg-[#0a0a0a]/90 backdrop-blur-sm border border-cyan-900/40 z-10 flex flex-col font-mono text-sm pointer-events-auto flex-shrink-0"
|
||||
>
|
||||
{/* Header */}
|
||||
<div
|
||||
|
||||
@@ -3893,7 +3893,7 @@ const MeshChat = React.memo(function MeshChat({
|
||||
>
|
||||
{/* Single unified box — matches Data Layers panel skin */}
|
||||
<div
|
||||
className={`bg-black/50 backdrop-blur-sm border border-cyan-800/40 flex flex-col relative overflow-hidden`}
|
||||
className={`bg-[#0a0a0a]/90 backdrop-blur-sm border border-cyan-900/40 flex flex-col relative overflow-hidden`}
|
||||
style={{ boxShadow: '0 0 15px rgba(8,145,178,0.06), inset 0 0 20px rgba(0,0,0,0.4)', ...(expanded ? { flex: '1 1 0', minHeight: 0 } : {}) }}
|
||||
>
|
||||
{/* HEADER */}
|
||||
|
||||
@@ -1053,7 +1053,7 @@ function NewsFeedInner({ selectedEntity, regionDossier, regionDossierLoading, on
|
||||
initial={{ y: 50, opacity: 0 }}
|
||||
animate={{ y: 0, opacity: 1 }}
|
||||
transition={{ duration: 0.8, delay: 0.2 }}
|
||||
className={`w-full bg-[var(--bg-primary)]/40 backdrop-blur-sm border border-[var(--border-primary)] flex flex-col z-10 font-mono pointer-events-auto overflow-hidden transition-all duration-300 ${isMinimized ? 'h-[50px] flex-shrink-0' : 'flex-1 min-h-0'}`}
|
||||
className={`w-full bg-[#0a0a0a]/90 backdrop-blur-sm border border-cyan-900/40 flex flex-col z-10 font-mono pointer-events-auto overflow-hidden transition-all duration-300 ${isMinimized ? 'h-[50px] flex-shrink-0' : 'flex-1 min-h-0'}`}
|
||||
>
|
||||
<div
|
||||
className="p-3 border-b border-[var(--border-primary)]/50 relative overflow-hidden cursor-pointer hover:bg-[var(--bg-secondary)]/50 transition-colors"
|
||||
|
||||
@@ -769,7 +769,7 @@ const PredictionsPanel = React.memo(function PredictionsPanel() {
|
||||
initial={{ opacity: 0, x: 50 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.2 }}
|
||||
className="w-full bg-[var(--bg-primary)]/40 backdrop-blur-sm border border-[var(--border-primary)] z-10 flex flex-col font-mono text-sm pointer-events-auto flex-shrink-0"
|
||||
className="w-full bg-[#0a0a0a]/90 backdrop-blur-sm border border-cyan-900/40 z-10 flex flex-col font-mono text-sm pointer-events-auto flex-shrink-0"
|
||||
>
|
||||
{/* Header */}
|
||||
<div
|
||||
|
||||
@@ -291,7 +291,7 @@ export default function RadioInterceptPanel({
|
||||
initial={{ opacity: 0, x: 50 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 1, delay: 0.2 }}
|
||||
className="w-full flex flex-col bg-[var(--bg-primary)]/40 backdrop-blur-sm border border-[var(--border-primary)] pointer-events-auto relative overflow-hidden max-h-full"
|
||||
className="w-full flex flex-col bg-[#0a0a0a]/90 backdrop-blur-sm border border-cyan-900/40 pointer-events-auto relative overflow-hidden max-h-full"
|
||||
>
|
||||
<div
|
||||
className="flex items-center justify-between p-4 border-b border-[var(--border-primary)]/50 cursor-pointer hover:bg-[var(--bg-secondary)]/50 transition-colors"
|
||||
|
||||
@@ -1103,7 +1103,7 @@ const WorldviewLeftPanel = React.memo(function WorldviewLeftPanel({
|
||||
</div>
|
||||
|
||||
{/* Data Layers Box */}
|
||||
<div className={`bg-[var(--bg-primary)]/40 backdrop-blur-sm border border-[var(--border-primary)] pointer-events-auto flex flex-col relative overflow-hidden max-h-full ${isMinimized ? 'flex-shrink-0' : 'flex-1 min-h-0'}`}>
|
||||
<div className={`bg-[#0a0a0a]/90 backdrop-blur-sm border border-cyan-900/40 pointer-events-auto flex flex-col relative overflow-hidden max-h-full ${isMinimized ? 'flex-shrink-0' : 'flex-1 min-h-0'}`}>
|
||||
{/* Header / Toggle */}
|
||||
<div
|
||||
className="flex justify-between items-center p-4 cursor-pointer hover:bg-[var(--bg-secondary)]/50 transition-colors border-b border-[var(--border-primary)]/50"
|
||||
|
||||
@@ -35,10 +35,10 @@ const WorldviewRightPanel = React.memo(function WorldviewRightPanel({
|
||||
initial={{ opacity: 0, x: -50 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 1 }}
|
||||
className={`w-full bg-[var(--bg-primary)]/40 backdrop-blur-sm border border-[var(--border-primary)] z-10 flex flex-col font-mono pointer-events-auto overflow-hidden transition-all duration-300 flex-shrink-0 ${isMinimized ? 'h-[50px]' : 'h-[320px]'}`}
|
||||
className={`w-full bg-[#0a0a0a]/90 backdrop-blur-sm border border-cyan-900/40 z-10 flex flex-col font-mono pointer-events-auto overflow-hidden transition-all duration-300 flex-shrink-0 ${isMinimized ? 'h-[50px]' : 'h-[320px]'}`}
|
||||
>
|
||||
{/* Record / Orbit Tracker Header */}
|
||||
<div className="flex items-center gap-3 mb-6 border border-[var(--border-primary)] bg-[var(--bg-primary)]/40 backdrop-blur-sm px-4 py-2 rounded-sm relative pointer-events-auto">
|
||||
<div className="flex items-center gap-3 mb-6 border border-cyan-900/40 bg-[#0a0a0a]/90 backdrop-blur-sm px-4 py-2 rounded-sm relative pointer-events-auto">
|
||||
<div className="absolute -top-1 -left-1 w-2 h-2 border-t border-l border-[var(--text-muted)]/50"></div>
|
||||
<div className="absolute -bottom-1 -right-1 w-2 h-2 border-b border-r border-[var(--text-muted)]/50"></div>
|
||||
<div className="w-2 h-2 bg-red-500 rounded-full animate-pulse"></div>
|
||||
@@ -50,7 +50,7 @@ const WorldviewRightPanel = React.memo(function WorldviewRightPanel({
|
||||
</div>
|
||||
|
||||
{/* Right side controls box */}
|
||||
<div className="bg-[var(--bg-primary)]/40 backdrop-blur-sm border border-[var(--border-primary)] pointer-events-auto border-r-2 border-r-[var(--border-primary)] flex flex-col relative overflow-hidden h-full">
|
||||
<div className="bg-[#0a0a0a]/90 backdrop-blur-sm border border-cyan-900/40 pointer-events-auto border-r-2 border-r-cyan-900/40 flex flex-col relative overflow-hidden h-full">
|
||||
{/* Header / Toggle */}
|
||||
<div
|
||||
className="flex justify-between items-center p-4 cursor-pointer hover:bg-[var(--bg-secondary)]/50 transition-colors border-b border-[var(--border-primary)]/50"
|
||||
|
||||
Reference in New Issue
Block a user