Skip to content

Commit 2a942e2

Browse files
WenlongZhang0517claude
WenlongZhang0517
and
claude
committed
Align styles with SGIWorld design system
- Change font from DM Sans to Inter - Update color scheme to match SGIWorld (claw: #f59e0b) - Update dark mode colors to match SGIWorld - Lighten sidebar background for better harmony - Update all theme variants (white, yellow, blue, dark) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
1 parent 7013655 commit 2a942e2

2 files changed

Lines changed: 118 additions & 115 deletions

File tree

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<link rel="icon" type="image/svg+xml" href="static/favicon.svg">
99
<link rel="preconnect" href="https://fonts.googleapis.com">
1010
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11-
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&family=Fira+Code:wght@400;500&display=swap" rel="stylesheet">
11+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Fira+Code:wght@400;500&display=swap" rel="stylesheet">
1212
<link rel="stylesheet" href="static/style.css?v=20260404a">
1313
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css">
1414
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/12.0.1/marked.min.js"></script>

‎static/style.css‎

Lines changed: 117 additions & 114 deletions
Original file line numberDiff line numberDiff line change
@@ -5,114 +5,117 @@
55

66
/* --- Tokens ---------------------------------------------------------- */
77
:root {
8-
/* surfaces */
9-
--bg: #ffffff;
10-
--bg-card: rgba(255,255,255,0.82);
11-
--bg-sidebar: rgba(245,245,248,0.92);
12-
--bg-terminal: rgba(16,16,20,0.85);
8+
/* surfaces - SGIWorld aligned */
9+
--bg: #f8fafc;
10+
--bg-card: rgba(255,255,255,0.75);
11+
--bg-sidebar: rgba(255,255,255,0.85);
12+
--bg-terminal: rgba(15,23,42,0.92);
1313
--bg-hover: rgba(0,0,0,0.03);
1414
--bg-inset: rgba(0,0,0,0.025);
15-
/* text */
16-
--text: #18181b;
17-
--text-secondary: #71717a;
18-
--text-tertiary: #a1a1aa;
19-
--text-sidebar: #3f3f46;
20-
--text-sidebar-dim:#71717a;
15+
/* text - SGIWorld aligned */
16+
--text: #1e293b;
17+
--text-secondary: #64748b;
18+
--text-tertiary: #94a3b8;
19+
--text-sidebar: #1e293b;
20+
--text-sidebar-dim:#64748b;
2121
/* chrome */
2222
--border: rgba(0,0,0,0.08);
2323
--border-strong: rgba(0,0,0,0.14);
2424
--ring: rgba(0,0,0,0.05);
25-
/* accent */
26-
--accent: #18181b;
27-
--accent-subtle: rgba(24,24,27,0.08);
25+
/* accent - SGIWorld claw color */
26+
--accent: #f59e0b;
27+
--accent-subtle: rgba(245,158,11,0.1);
2828
--accent-text: #ffffff;
2929
/* status */
30-
--ok: #22c55e;
31-
--warn:#eab308;
30+
--ok: #10b981;
31+
--warn:#f59e0b;
3232
--err: #ef4444;
3333
--info:#3b82f6;
3434
/* misc */
35-
--radius: 10px;
36-
--radius-sm: 6px;
37-
--radius-lg: 14px;
35+
--radius: 12px;
36+
--radius-sm: 8px;
37+
--radius-lg: 16px;
3838
--shadow: 0 1px 2px rgba(0,0,0,0.05);
3939
--shadow-md: 0 4px 12px rgba(0,0,0,0.08);
4040
--shadow-lg: 0 8px 30px rgba(0,0,0,0.10);
41-
--tile-rgb: 10,10,10;
42-
--glow-rgb: 24,24,27;
43-
--font: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
41+
--tile-rgb: 245,158,11;
42+
--glow-rgb: 245,158,11;
43+
--font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
4444
--mono: 'Fira Code', 'Menlo', 'Monaco', 'Consolas', monospace;
4545
--transition: 0.2s ease;
4646
}
4747

4848
[data-theme="yellow"] {
49-
--bg: #faf8f3;
50-
--bg-card: rgba(255,252,244,0.82);
51-
--bg-sidebar: rgba(60,45,20,0.88);
52-
--bg-terminal: rgba(30,22,8,0.85);
53-
--bg-hover: rgba(140,95,35,0.05);
54-
--bg-inset: rgba(140,95,35,0.04);
55-
--text: #2c1a06;
56-
--text-secondary: #8a7055;
57-
--text-tertiary: #b8a080;
58-
--text-sidebar: #f0e8d8;
59-
--text-sidebar-dim:#a89878;
60-
--border: rgba(140,95,35,0.12);
61-
--border-strong: rgba(140,95,35,0.22);
62-
--ring: rgba(140,95,35,0.06);
63-
--accent: #92640a;
64-
--accent-subtle: rgba(146,100,10,0.1);
49+
/* SGIWorld claw theme */
50+
--bg: #fffbeb;
51+
--bg-card: rgba(255,251,235,0.82);
52+
--bg-sidebar: rgba(255,251,235,0.92);
53+
--bg-terminal: rgba(30,22,8,0.92);
54+
--bg-hover: rgba(245,158,11,0.05);
55+
--bg-inset: rgba(245,158,11,0.04);
56+
--text: #1e293b;
57+
--text-secondary: #64748b;
58+
--text-tertiary: #94a3b8;
59+
--text-sidebar: #1e293b;
60+
--text-sidebar-dim:#64748b;
61+
--border: rgba(245,158,11,0.15);
62+
--border-strong: rgba(245,158,11,0.25);
63+
--ring: rgba(245,158,11,0.08);
64+
--accent: #f59e0b;
65+
--accent-subtle: rgba(245,158,11,0.12);
6566
--accent-text: #ffffff;
66-
--tile-rgb: 120,85,20;
67-
--glow-rgb: 146,100,10;
67+
--tile-rgb: 245,158,11;
68+
--glow-rgb: 245,158,11;
6869
}
6970

7071
[data-theme="blue"] {
71-
--bg: #f4f6fa;
72-
--bg-card: rgba(245,248,255,0.82);
73-
--bg-sidebar: rgba(16,32,60,0.88);
74-
--bg-terminal: rgba(10,18,36,0.85);
75-
--bg-hover: rgba(38,88,155,0.05);
76-
--bg-inset: rgba(38,88,155,0.04);
77-
--text: #0f2440;
78-
--text-secondary: #5a7a9a;
79-
--text-tertiary: #8aa8c8;
80-
--text-sidebar: #d0dff0;
81-
--text-sidebar-dim:#7a9ab8;
82-
--border: rgba(38,88,155,0.12);
83-
--border-strong: rgba(38,88,155,0.22);
84-
--ring: rgba(38,88,155,0.06);
85-
--accent: #1d5faa;
86-
--accent-subtle: rgba(29,95,170,0.1);
72+
/* SGIWorld sgi/seevo theme */
73+
--bg: #f8fafc;
74+
--bg-card: rgba(248,250,252,0.82);
75+
--bg-sidebar: rgba(248,250,252,0.92);
76+
--bg-terminal: rgba(10,18,36,0.92);
77+
--bg-hover: rgba(99,102,241,0.05);
78+
--bg-inset: rgba(99,102,241,0.04);
79+
--text: #1e293b;
80+
--text-secondary: #64748b;
81+
--text-tertiary: #94a3b8;
82+
--text-sidebar: #1e293b;
83+
--text-sidebar-dim:#64748b;
84+
--border: rgba(99,102,241,0.12);
85+
--border-strong: rgba(99,102,241,0.22);
86+
--ring: rgba(99,102,241,0.06);
87+
--accent: #6366f1;
88+
--accent-subtle: rgba(99,102,241,0.1);
8789
--accent-text: #ffffff;
88-
--tile-rgb: 38,88,155;
89-
--glow-rgb: 29,95,170;
90+
--tile-rgb: 99,102,241;
91+
--glow-rgb: 99,102,241;
9092
}
9193

9294
[data-theme="dark"] {
93-
--bg: #111110;
94-
--bg-card: rgba(28,28,26,0.82);
95-
--bg-sidebar: rgba(18,18,16,0.88);
96-
--bg-terminal: rgba(10,10,9,0.85);
95+
/* SGIWorld dark mode aligned */
96+
--bg: #0B0F19;
97+
--bg-card: rgba(17,24,39,0.75);
98+
--bg-sidebar: rgba(17,24,39,0.88);
99+
--bg-terminal: rgba(10,10,15,0.92);
97100
--bg-hover: rgba(255,255,255,0.04);
98101
--bg-inset: rgba(255,255,255,0.03);
99-
--text: #e8e6df;
100-
--text-secondary: #a8a69f;
101-
--text-tertiary: #7a7870;
102-
--text-sidebar: #d0cec7;
103-
--text-sidebar-dim:#8a8880;
104-
--border: rgba(255,255,255,0.08);
105-
--border-strong: rgba(255,255,255,0.14);
102+
--text: #f1f5f9;
103+
--text-secondary: #94a3b8;
104+
--text-tertiary: #64748b;
105+
--text-sidebar: #f1f5f9;
106+
--text-sidebar-dim:#94a3b8;
107+
--border: rgba(55,65,81,0.5);
108+
--border-strong: rgba(75,85,99,0.6);
106109
--ring: rgba(255,255,255,0.04);
107-
--accent: #e8e6df;
108-
--accent-subtle: rgba(232,230,223,0.1);
109-
--accent-text: #111110;
110-
--ok: #34d399; --warn:#fbbf24; --err:#f87171; --info:#60a5fa;
110+
--accent: #f59e0b;
111+
--accent-subtle: rgba(245,158,11,0.15);
112+
--accent-text: #ffffff;
113+
--ok: #10b981; --warn:#f59e0b; --err:#f87171; --info:#60a5fa;
111114
--shadow: 0 1px 2px rgba(0,0,0,0.3);
112115
--shadow-md: 0 4px 12px rgba(0,0,0,0.4);
113116
--shadow-lg: 0 8px 30px rgba(0,0,0,0.5);
114-
--tile-rgb: 220,210,175;
115-
--glow-rgb: 232,230,223;
117+
--tile-rgb: 245,158,11;
118+
--glow-rgb: 245,158,11;
116119
}
117120

118121
/* --- Reset ----------------------------------------------------------- */
@@ -247,52 +250,52 @@ body { height: 100vh; font-family: var(--font); font-size: 17px; line-height: 1.
247250
.dashboard-tagline { font-size: 18px !important; }
248251

249252
.chart-subtitle { font-size: 13.5px; color: var(--text-tertiary); margin: -8px 0 8px; }
250-
.chart-legend {
251-
display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 10px;
252-
}
253-
.chart-legend-item { display: flex; align-items: center; gap: 5px; font-size: 14.5px; font-weight: 500; color: var(--text-secondary); }
254-
.chart-legend-item img { width: 14px; height: 14px; border-radius: 3px; object-fit: contain; }
255-
.chart-legend-text { display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; }
256-
.chart-legend-model { font-size: 11px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; }
257-
.chart-legend-swatch { width: 14px; height: 3px; border-radius: 2px; }
258-
.chart-legend-swatch.dashed { border-top: 2px dashed; width: 18px; height: 0; background: none; }
253+
.chart-legend {
254+
display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 10px;
255+
}
256+
.chart-legend-item { display: flex; align-items: center; gap: 5px; font-size: 14.5px; font-weight: 500; color: var(--text-secondary); }
257+
.chart-legend-item img { width: 14px; height: 14px; border-radius: 3px; object-fit: contain; }
258+
.chart-legend-text { display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; }
259+
.chart-legend-model { font-size: 11px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; }
260+
.chart-legend-swatch { width: 14px; height: 3px; border-radius: 2px; }
261+
.chart-legend-swatch.dashed { border-top: 2px dashed; width: 18px; height: 0; background: none; }
259262
.chart-container { position: relative; width: 100%; height: 416px; }
260263

261264
.stats { display: flex; gap: 28px; }
262265
.stat { text-align: center; }
263266
.stat-value { font-size: 33.5px; font-weight: 700; color: var(--accent); letter-spacing: -1px; }
264267
.stat-label { font-size: 12px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.8px; margin-top: 1px; }
265268

266-
/* leaderboard */
267-
.leaderboard-scrollbar-shell { display: flex; align-items: center; gap: 12px; margin: -2px 0 10px; }
268-
.leaderboard-scrollbar-hint { font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-tertiary); white-space: nowrap; }
269-
.leaderboard-scrollbar { flex: 1; overflow-x: auto; overflow-y: hidden; border-radius: 999px; background: linear-gradient(90deg, rgba(var(--tile-rgb), 0.08), rgba(var(--glow-rgb), 0.14)), var(--bg-inset); box-shadow: inset 0 0 0 1px var(--border); scrollbar-width: thin; scrollbar-color: rgba(var(--glow-rgb), 0.55) transparent; }
270-
.leaderboard-scrollbar::-webkit-scrollbar { height: 12px; }
271-
.leaderboard-scrollbar::-webkit-scrollbar-track { background: transparent; border-radius: 999px; }
272-
.leaderboard-scrollbar::-webkit-scrollbar-thumb { background: linear-gradient(90deg, rgba(var(--tile-rgb), 0.5), rgba(var(--glow-rgb), 0.6)); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
273-
.leaderboard-scrollbar-spacer { height: 1px; }
274-
.leaderboard-wrap { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
275-
.leaderboard { width: max-content; min-width: 100%; border-collapse: collapse; font-size: 14.5px; }
276-
.leaderboard th, .leaderboard td { padding: 7px 10px; text-align: center; border-bottom: 1px solid var(--border); white-space: nowrap; }
277-
.leaderboard th { font-weight: 600; color: var(--text-secondary); font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; position: sticky; top: 0; background: var(--bg-card); }
278-
.leaderboard th:first-child, .leaderboard td:first-child { text-align: left; font-weight: 500; position: sticky; left: 0; background: var(--bg-card); z-index: 2; min-width: 148px; box-shadow: 1px 0 0 var(--border); }
279-
.leaderboard thead th:first-child { z-index: 4; }
280-
.leaderboard th:not(:first-child), .leaderboard td:not(:first-child) { min-width: 132px; }
281-
.leaderboard-agent-head { display: flex; flex-direction: column; align-items: center; gap: 2px; }
282-
.leaderboard-agent-name { display: inline-flex; align-items: center; gap: 6px; }
283-
.leaderboard-agent-model { font-size: 10px; color: var(--text-tertiary); letter-spacing: 0.06em; }
284-
.leaderboard td { cursor: pointer; transition: background 0.1s; font-family: var(--mono); font-size: 13px; }
285-
.leaderboard td:hover { background: var(--bg-hover); }
286-
.leaderboard td.no-score { color: var(--text-tertiary); font-family: var(--font); cursor: default; }
287-
.leaderboard .frontier-row td { font-weight: 700; border-top: 2px solid var(--border-strong); color: var(--accent); }
288-
.leaderboard .frontier-row td:first-child { font-family: var(--font); font-size: 14.5px; }
289-
290-
.score-cell { border-radius: 4px; padding: 3px 8px; display: inline-block; min-width: 38px; text-align: center; font-size: 13px; }
291-
.score-cell.score-cell-empty { background: transparent; color: var(--text-tertiary); }
292-
.leaderboard-score-td { font-family: var(--mono); }
293-
.leaderboard-score-wrap { display: flex; align-items: center; justify-content: flex-start; gap: 7px; padding-left: 10px; }
294-
.leaderboard-cell-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; font-size: 11px; line-height: 1.15; color: var(--text-secondary); font-family: var(--mono); }
295-
/* welcome fallback (no data) */
269+
/* leaderboard */
270+
.leaderboard-scrollbar-shell { display: flex; align-items: center; gap: 12px; margin: -2px 0 10px; }
271+
.leaderboard-scrollbar-hint { font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-tertiary); white-space: nowrap; }
272+
.leaderboard-scrollbar { flex: 1; overflow-x: auto; overflow-y: hidden; border-radius: 999px; background: linear-gradient(90deg, rgba(var(--tile-rgb), 0.08), rgba(var(--glow-rgb), 0.14)), var(--bg-inset); box-shadow: inset 0 0 0 1px var(--border); scrollbar-width: thin; scrollbar-color: rgba(var(--glow-rgb), 0.55) transparent; }
273+
.leaderboard-scrollbar::-webkit-scrollbar { height: 12px; }
274+
.leaderboard-scrollbar::-webkit-scrollbar-track { background: transparent; border-radius: 999px; }
275+
.leaderboard-scrollbar::-webkit-scrollbar-thumb { background: linear-gradient(90deg, rgba(var(--tile-rgb), 0.5), rgba(var(--glow-rgb), 0.6)); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
276+
.leaderboard-scrollbar-spacer { height: 1px; }
277+
.leaderboard-wrap { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
278+
.leaderboard { width: max-content; min-width: 100%; border-collapse: collapse; font-size: 14.5px; }
279+
.leaderboard th, .leaderboard td { padding: 7px 10px; text-align: center; border-bottom: 1px solid var(--border); white-space: nowrap; }
280+
.leaderboard th { font-weight: 600; color: var(--text-secondary); font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; position: sticky; top: 0; background: var(--bg-card); }
281+
.leaderboard th:first-child, .leaderboard td:first-child { text-align: left; font-weight: 500; position: sticky; left: 0; background: var(--bg-card); z-index: 2; min-width: 148px; box-shadow: 1px 0 0 var(--border); }
282+
.leaderboard thead th:first-child { z-index: 4; }
283+
.leaderboard th:not(:first-child), .leaderboard td:not(:first-child) { min-width: 132px; }
284+
.leaderboard-agent-head { display: flex; flex-direction: column; align-items: center; gap: 2px; }
285+
.leaderboard-agent-name { display: inline-flex; align-items: center; gap: 6px; }
286+
.leaderboard-agent-model { font-size: 10px; color: var(--text-tertiary); letter-spacing: 0.06em; }
287+
.leaderboard td { cursor: pointer; transition: background 0.1s; font-family: var(--mono); font-size: 13px; }
288+
.leaderboard td:hover { background: var(--bg-hover); }
289+
.leaderboard td.no-score { color: var(--text-tertiary); font-family: var(--font); cursor: default; }
290+
.leaderboard .frontier-row td { font-weight: 700; border-top: 2px solid var(--border-strong); color: var(--accent); }
291+
.leaderboard .frontier-row td:first-child { font-family: var(--font); font-size: 14.5px; }
292+
293+
.score-cell { border-radius: 4px; padding: 3px 8px; display: inline-block; min-width: 38px; text-align: center; font-size: 13px; }
294+
.score-cell.score-cell-empty { background: transparent; color: var(--text-tertiary); }
295+
.leaderboard-score-td { font-family: var(--mono); }
296+
.leaderboard-score-wrap { display: flex; align-items: center; justify-content: flex-start; gap: 7px; padding-left: 10px; }
297+
.leaderboard-cell-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; font-size: 11px; line-height: 1.15; color: var(--text-secondary); font-family: var(--mono); }
298+
/* welcome fallback (no data) */
296299
.welcome-card { max-width: 480px; margin: 100px auto; text-align: center; }
297300
.welcome-icon { font-size: 48px; margin-bottom: 16px; opacity: 0.25; }
298301

0 commit comments

Comments
 (0)