CalvinBackup/Shadowbroker
1
0
Fork 0
mirror of https://github.com/BigBodyCobain/Shadowbroker.git synced 2026-08-27 12:53:00 +02:00
Code Issues Packages Projects Releases Wiki Activity

style: terminal reskin — Infonet aesthetic for main dashboard

Browse Source 
- 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
2026-03-26 20:53:27 -06:00
parent 2dcb65dc4e
commit 5e40e8dd55
12 changed files with 58 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/FilterPanel.tsx
+1 -1
View File
@@ -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
frontend/src/components/FindLocateBar.tsx
+1 -1
View File
@@ -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}
frontend/src/components/GlobalTicker.tsx
+1 -1
View File
@@ -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 && (
frontend/src/components/MarketsPanel.tsx
+1 -1
View File
@@ -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
frontend/src/components/MeshChat.tsx
+1 -1
View File
@@ -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 */}
frontend/src/components/NewsFeed.tsx
+1 -1
View File
@@ -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"
frontend/src/components/PredictionsPanel.tsx
+1 -1
View File
@@ -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
frontend/src/components/RadioInterceptPanel.tsx
+1 -1
View File
@@ -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"
frontend/src/components/WorldviewLeftPanel.tsx
+1 -1
View File
@@ -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"
frontend/src/components/WorldviewRightPanel.tsx
+3 -3
View File
@@ -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"