art-dag/celery
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: left-justify layout, increase text sizes

Browse Source 
- Runs/cards max-width 900px, left-aligned
- Media boxes left-justified, max 400px each
- Increased font sizes throughout

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
gilesb
2026-01-07 14:20:38 +00:00
parent c03a26dbf2
commit 30050f7a65
1 changed files with 25 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
server.py
View File

@@ -381,56 +381,57 @@ UI_CSS = """
* { box-sizing: border-box; }
body {
font-family: system-ui, -apple-system, sans-serif;
margin: 0; padding: 20px;
margin: 0; padding: 24px;
background: #111; color: #eee;
font-size: 16px;
}
h1 { margin: 0 0 20px 0; color: #fff; }
h2 { color: #ccc; margin: 24px 0 12px 0; font-size: 16px; }
h1 { margin: 0 0 24px 0; color: #fff; font-size: 28px; }
h2 { color: #ccc; margin: 24px 0 12px 0; font-size: 20px; }
a { color: #60a5fa; text-decoration: none; }
a:hover { color: #93c5fd; text-decoration: underline; }
.runs { display: flex; flex-direction: column; gap: 12px; }
.runs { display: flex; flex-direction: column; gap: 16px; max-width: 900px; }
.run {
background: #222; border-radius: 8px; padding: 16px;
background: #222; border-radius: 8px; padding: 20px;
border: 1px solid #333;
}
.run-link { display: block; text-decoration: none; color: inherit; }
.run-link { display: block; text-decoration: none; color: inherit; max-width: 900px; }
.run-link:hover .run { border-color: #555; background: #282828; }
.run-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.run-id { font-family: monospace; font-size: 12px; color: #888; }
.run-recipe { font-weight: bold; font-size: 18px; color: #fff; }
.run-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.run-id { font-family: monospace; font-size: 14px; color: #888; margin-left: 12px; }
.run-recipe { font-weight: bold; font-size: 22px; color: #fff; }
.status {
padding: 4px 12px; border-radius: 12px; font-size: 12px; font-weight: 500;
padding: 6px 14px; border-radius: 12px; font-size: 14px; font-weight: 500;
}
.status.completed { background: #1a4d1a; color: #4ade80; }
.status.running { background: #4d4d1a; color: #facc15; }
.status.failed { background: #4d1a1a; color: #f87171; }
.status.pending { background: #333; color: #888; }
.media-row { display: flex; gap: 16px; margin-top: 12px; flex-wrap: wrap; }
.media-box { flex: 1; min-width: 200px; }
.media-box label { font-size: 11px; color: #666; display: block; margin-bottom: 4px; }
.media-row { display: flex; gap: 20px; margin-top: 16px; flex-wrap: wrap; justify-content: flex-start; }
.media-box { flex: 0 1 auto; min-width: 200px; max-width: 400px; }
.media-box label { font-size: 13px; color: #888; display: block; margin-bottom: 6px; }
.media-container { }
.media-container img, .media-container video {
max-width: 100%; max-height: 300px; border-radius: 4px;
}
@media (max-width: 600px) {
.media-row { flex-direction: column; }
.media-box { min-width: 100%; }
.media-box { min-width: 100%; max-width: 100%; }
}
.hash { font-family: monospace; font-size: 11px; color: #666; }
.hash { font-family: monospace; font-size: 13px; color: #666; }
.hash a { color: #888; }
.hash a:hover { color: #60a5fa; }
.info { font-size: 13px; color: #aaa; }
.info { font-size: 15px; color: #aaa; }
.refresh-btn, .back-btn {
background: #333; color: #fff; border: none; padding: 8px 16px;
border-radius: 4px; cursor: pointer; margin-bottom: 16px;
text-decoration: none; display: inline-block;
background: #333; color: #fff; border: none; padding: 10px 20px;
border-radius: 4px; cursor: pointer; margin-bottom: 20px;
text-decoration: none; display: inline-block; font-size: 15px;
}
.refresh-btn:hover, .back-btn:hover { background: #444; }
.no-runs { color: #666; font-style: italic; }
.provenance { background: #1a1a1a; border-radius: 8px; padding: 16px; margin-top: 16px; }
.prov-item { margin: 8px 0; }
.prov-label { color: #888; font-size: 12px; }
.prov-value { font-family: monospace; font-size: 13px; }
.no-runs { color: #666; font-style: italic; font-size: 16px; }
.provenance { background: #1a1a1a; border-radius: 8px; padding: 20px; margin-top: 20px; max-width: 700px; }
.prov-item { margin: 12px 0; }
.prov-label { color: #888; font-size: 14px; margin-bottom: 4px; }
.prov-value { font-family: monospace; font-size: 15px; word-break: break-all; }
code { background: #222; padding: 2px 6px; border-radius: 4px; }
"""