diff --git a/static/css/dashboard.css b/static/css/dashboard.css
index 4b848ed6..8cd8e53a 100644
--- a/static/css/dashboard.css
+++ b/static/css/dashboard.css
@@ -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 {
diff --git a/static/index.html b/static/index.html
index 6d05abe0..e79f2e61 100644
--- a/static/index.html
+++ b/static/index.html
@@ -4,11 +4,11 @@
LLM Proxy Gateway - Admin Dashboard
-
+
-
+
@@ -17,8 +17,7 @@
-
+