mirror of
https://github.com/blw1138/cross-py-builder.git
synced 2026-09-07 21:41:09 -05:00
Brett Williams
5967b606c7
The .modal CSS display:flex override the hidden attribute, so the empty job
modal was always visible on load and closeModal() could not hide it - the
'non-dismissable empty error'. Add .modal[hidden] { display:none } so the
hidden attribute wins.
The blanket errorhandler(Exception) also converted normal HTTP 404s (e.g.
/favicon.ico, /apple-touch-icon-*.png requested by the browser) into 500s,
flooding the log. Return HTTPException instances unchanged so only genuine
500s are logged as errors.
145 lines
3.5 KiB
CSS
145 lines
3.5 KiB
CSS
/* Cross-Py-Builder styles */
|
|
* { box-sizing: border-box; }
|
|
|
|
:root {
|
|
--bg: #10151c;
|
|
--panel: #1a222c;
|
|
--panel-2: #202a36;
|
|
--text: #e6edf3;
|
|
--muted: #8b98a5;
|
|
--accent: #4c8bf5;
|
|
--border: #2d3a49;
|
|
--ok: #3fb950;
|
|
--fail: #f85149;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
}
|
|
|
|
header {
|
|
padding: 20px 28px;
|
|
border-bottom: 1px solid var(--border);
|
|
background: var(--panel);
|
|
}
|
|
|
|
header h1 { margin: 0 0 4px; font-size: 22px; }
|
|
header p { margin: 0; color: var(--muted); font-size: 13px; }
|
|
|
|
main {
|
|
max-width: 900px;
|
|
margin: 0 auto;
|
|
padding: 24px;
|
|
display: grid;
|
|
gap: 20px;
|
|
}
|
|
|
|
.card {
|
|
background: var(--panel);
|
|
border: 1px solid var(--border);
|
|
border-radius: 10px;
|
|
padding: 18px 20px;
|
|
}
|
|
|
|
.card h2 { margin: 0 0 14px; font-size: 16px; }
|
|
|
|
.field { margin-bottom: 12px; }
|
|
.field label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; }
|
|
.field input, .field select {
|
|
width: 100%;
|
|
padding: 8px 10px;
|
|
background: var(--panel-2);
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
color: var(--text);
|
|
font-size: 14px;
|
|
}
|
|
.fields-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
|
|
|
|
button {
|
|
padding: 8px 14px;
|
|
background: var(--accent);
|
|
border: 0;
|
|
border-radius: 6px;
|
|
color: #fff;
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
}
|
|
button:hover { filter: brightness(1.1); }
|
|
|
|
.msg { color: var(--accent); font-size: 13px; min-height: 1em; }
|
|
.msg.error { color: var(--fail); }
|
|
.muted { color: var(--muted); }
|
|
|
|
#jobs table { width: 100%; border-collapse: collapse; font-size: 14px; }
|
|
#jobs th, #jobs td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--border); }
|
|
#jobs th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; }
|
|
#jobs tr.clickable { cursor: pointer; }
|
|
#jobs tr.clickable:hover { background: var(--panel-2); }
|
|
|
|
.badge {
|
|
display: inline-block;
|
|
padding: 2px 10px;
|
|
border-radius: 20px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
text-transform: capitalize;
|
|
}
|
|
.badge.done { background: #12331a; color: var(--ok); }
|
|
.badge.failed { background: #331517; color: var(--fail); }
|
|
.badge.queued, .badge.dispatching, .badge.building { background: #1c2a40; color: var(--accent); }
|
|
.badge.cancelled { background: var(--panel-2); color: var(--muted); }
|
|
|
|
.modal[hidden] { display: none; }
|
|
.modal {
|
|
position: fixed; inset: 0;
|
|
background: rgba(0, 0, 0, 0.65);
|
|
display: flex; align-items: center; justify-content: center;
|
|
padding: 24px;
|
|
}
|
|
.modal-body {
|
|
position: relative;
|
|
width: 100%; max-width: 760px; max-height: 90vh;
|
|
overflow: auto;
|
|
background: var(--panel);
|
|
border: 1px solid var(--border);
|
|
border-radius: 10px;
|
|
padding: 22px 26px;
|
|
}
|
|
.modal-body h3 { margin: 0 0 6px; }
|
|
.modal-body .close {
|
|
position: absolute; top: 12px; right: 14px;
|
|
background: none; border: none; color: var(--muted); font-size: 22px; line-height: 1;
|
|
}
|
|
.job-meta code { color: var(--muted); font-size: 13px; word-break: break-all; }
|
|
|
|
#log {
|
|
background: #0b0e13;
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
padding: 12px;
|
|
margin-top: 14px;
|
|
font-size: 12px;
|
|
line-height: 1.45;
|
|
max-height: 40vh;
|
|
overflow: auto;
|
|
white-space: pre-wrap;
|
|
color: #c9d4df;
|
|
}
|
|
|
|
#artifacts { margin-top: 12px; }
|
|
#artifacts a {
|
|
display: inline-block;
|
|
margin: 4px 8px 0 0;
|
|
padding: 6px 12px;
|
|
background: var(--panel-2);
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
color: var(--accent);
|
|
text-decoration: none;
|
|
font-size: 13px;
|
|
}
|