hobokenchicken/GopherGate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(dashboard): implement retro terminal gruvbox aesthetic
Some checks failed
CI / Check (push) Has been cancelled
Details
CI / Clippy (push) Has been cancelled
Details
CI / Formatting (push) Has been cancelled
Details
CI / Test (push) Has been cancelled
Details
CI / Release Build (push) Has been cancelled
Details

Browse Source 
This commit overhauls the dashboard styling to achieve a 'retro terminal' look matching the Gruvbox color palette. Changes include switching the global font to JetBrains Mono/Fira Code, removing rounded corners on all major elements (cards, buttons, inputs, modals, badges), and replacing modern soft shadows with sharp, hard-offset block shadows.
This commit is contained in:
Dustin Newkirk
2026-03-07 01:42:01 +00:00
parent 0526304398
commit c2595f7a74
2 changed files with 43 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
static/css/dashboard.css
View File

@@ -61,9 +61,9 @@
--text-white: var(--fg0);
/* Borders */
--border-color: var(--bg2);
--border-radius: 8px;
--border-radius-sm: 4px;
--border-color: var(--bg3);
--border-radius: 0px;
--border-radius-sm: 0px;
/* Spacing System */
--spacing-xs: 0.25rem;
@@ -72,15 +72,15 @@
--spacing-lg: 1.5rem;
--spacing-xl: 2rem;
/* Shadows */
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
--shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
--shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.4);
--shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
/* Shadows - Retro Block Style */
--shadow-sm: 2px 2px 0px rgba(0, 0, 0, 0.4);
--shadow: 4px 4px 0px rgba(0, 0, 0, 0.5);
--shadow-md: 6px 6px 0px rgba(0, 0, 0, 0.6);
--shadow-lg: 8px 8px 0px rgba(0, 0, 0, 0.7);
}
body {
font-family: 'Inter', -apple-system, sans-serif;
font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
background-color: var(--bg-primary);
color: var(--text-primary);
line-height: 1.6;
@@ -105,12 +105,12 @@ body {
.login-card {
background: var(--bg1);
border-radius: 24px;
border-radius: var(--border-radius);
padding: 4rem 2.5rem 3rem;
width: 100%;
max-width: 440px;
box-shadow: var(--shadow-lg);
border: 1px solid var(--bg2);
border: 2px solid var(--bg3);
text-align: center;
animation: slideUp 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
position: relative;
@@ -215,18 +215,19 @@ body {
padding: 1rem 1.25rem;
background: var(--bg0);
border: 2px solid var(--bg3);
border-radius: 12px;
border-radius: var(--border-radius);
font-family: inherit;
font-size: 1rem;
color: var(--fg1);
transition: all 0.3s;
transition: all 0.2s;
width: 100%;
box-sizing: border-box;
}
.form-group input:focus {
border-color: var(--orange);
box-shadow: 0 0 0 4px rgba(214, 93, 14, 0.2);
outline: none;
box-shadow: 4px 4px 0px rgba(214, 93, 14, 0.4);
}
.login-btn {
@@ -733,11 +734,11 @@ body {
.stat-change.positive { color: var(--green-light); }
.stat-change.negative { color: var(--red-light); }
/* Generic Cards */
/* Cards */
.card {
background: var(--bg1);
border-radius: var(--border-radius);
border: 1px solid var(--bg2);
border: 1px solid var(--bg3);
box-shadow: var(--shadow-sm);
margin-bottom: 1.5rem;
display: flex;
@@ -827,25 +828,26 @@ body {
/* Badges */
.status-badge {
padding: 0.25rem 0.75rem;
border-radius: 9999px;
border-radius: var(--border-radius);
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
display: inline-flex;
align-items: center;
gap: 0.375rem;
border: 1px solid transparent;
}
.status-badge.online, .status-badge.success { background: rgba(184, 187, 38, 0.2); color: var(--green-light); }
.status-badge.offline, .status-badge.danger { background: rgba(251, 73, 52, 0.2); color: var(--red-light); }
.status-badge.warning { background: rgba(250, 189, 47, 0.2); color: var(--yellow-light); }
.status-badge.online, .status-badge.success { background: rgba(184, 187, 38, 0.2); color: var(--green-light); border-color: rgba(184, 187, 38, 0.4); }
.status-badge.offline, .status-badge.danger { background: rgba(251, 73, 52, 0.2); color: var(--red-light); border-color: rgba(251, 73, 52, 0.4); }
.status-badge.warning { background: rgba(250, 189, 47, 0.2); color: var(--yellow-light); border-color: rgba(250, 189, 47, 0.4); }
.badge-client {
background: var(--bg2);
color: var(--blue-light);
padding: 2px 8px;
border-radius: 6px;
font-family: monospace;
border-radius: var(--border-radius);
font-family: inherit;
font-size: 0.85rem;
border: 1px solid var(--bg3);
}
@@ -899,7 +901,7 @@ body {
width: 100%;
background: var(--bg0);
border: 1px solid var(--bg3);
border-radius: 8px;
border-radius: var(--border-radius);
padding: 0.75rem;
font-family: inherit;
font-size: 0.875rem;
@@ -910,7 +912,7 @@ body {
.form-control input:focus, .form-control textarea:focus, .form-control select:focus {
outline: none;
border-color: var(--orange);
box-shadow: 0 0 0 2px rgba(214, 93, 14, 0.2);
box-shadow: 2px 2px 0px rgba(214, 93, 14, 0.4);
}
.btn {
@@ -918,21 +920,27 @@ body {
align-items: center;
gap: 0.5rem;
padding: 0.625rem 1.25rem;
border-radius: 8px;
border-radius: var(--border-radius);
font-weight: 600;
font-size: 0.875rem;
cursor: pointer;
transition: all 0.2s;
transition: all 0.1s;
border: 1px solid transparent;
text-transform: uppercase;
}
.btn-primary { background: var(--orange); color: var(--bg0); }
.btn:active {
transform: translate(2px, 2px);
box-shadow: none !important;
}
.btn-primary { background: var(--orange); color: var(--bg0); box-shadow: 2px 2px 0px var(--bg4); }
.btn-primary:hover { background: var(--orange-light); }
.btn-secondary { background: var(--bg2); border-color: var(--bg3); color: var(--fg1); }
.btn-secondary { background: var(--bg2); border-color: var(--bg3); color: var(--fg1); box-shadow: 2px 2px 0px var(--bg0); }
.btn-secondary:hover { background: var(--bg3); color: var(--fg0); }
.btn-danger { background: var(--red); color: var(--fg0); }
.btn-danger { background: var(--red); color: var(--fg0); box-shadow: 2px 2px 0px var(--bg4); }
.btn-danger:hover { background: var(--red-light); }
/* Small inline action buttons (edit, delete, copy) */
@@ -991,13 +999,13 @@ body {
.modal-content {
background: var(--bg1);
border-radius: 16px;
border-radius: var(--border-radius);
width: 90%;
max-width: 500px;
box-shadow: var(--shadow-lg);
border: 1px solid var(--bg3);
border: 2px solid var(--bg3);
transform: translateY(20px);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
transition: all 0.2s;
}
.modal.active .modal-content {

7
static/index.html
View File

@@ -4,11 +4,11 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LLM Proxy Gateway - Admin Dashboard</title>
<link rel="stylesheet" href="/css/dashboard.css?v=9">
<link rel="stylesheet" href="/css/dashboard.css?v=11">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="icon" href="img/logo-icon.png" type="image/png" sizes="any">
<link rel="apple-touch-icon" href="img/logo-icon.png">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luxon@3.4.4/build/global/luxon.min.js"></script>
</head>
@@ -17,8 +17,7 @@
<div id="login-screen" class="login-container">
<div class="login-card">
<div class="login-header">
<img src="img/logo-full.png" alt="LLM Proxy Logo" class="login-logo" onerror="this.style.display='none'; this.nextElementSibling.style.display='block';">
<i class="fas fa-robot login-logo-fallback" style="display: none;"></i>
<i class="fas fa-terminal login-logo-fallback"></i>
<h1>LLM Proxy Gateway</h1>
<p class="login-subtitle">Admin Dashboard</p>
</div>