qpismont
7493de6952
ci/woodpecker/push/tests Pipeline was successful
Expose /jobs, /dedup, and /events routes backed by a new EventBus that broadcasts job lifecycle and per-job progress over SSE. Serve a static dashboard from front/ that lists pending and in-progress jobs, streams agent activity, and shows completed reviews. Also add migrate-apply/migrate-generate scripts that load .env, update the Containerfile to ship the front assets and use the apply script, and refresh the roadmap.
367 lines
10 KiB
CSS
367 lines
10 KiB
CSS
/* Dashboard Steep — reprend le design system du site public
|
|
(mêmes jetons de couleur, mêmes composants d'en-tête/pied) et ajoute les
|
|
styles propres au tableau de bord. */
|
|
|
|
:root {
|
|
color-scheme: dark;
|
|
--paper: #0b1520;
|
|
--surface: #111f2d;
|
|
--ink: #edf4f7;
|
|
--ink-soft: #c2cfd9;
|
|
--muted: #94a8b8;
|
|
--line: #263b4d;
|
|
--green: #087b5b;
|
|
--green-dark: #5bd4a7;
|
|
--green-pale: #153a32;
|
|
--blue-pale: #1a3044;
|
|
--shadow: 0 18px 50px rgba(0, 0, 0, 0.24);
|
|
--button-hover: #066449;
|
|
--brand-mark-bg: #149b72;
|
|
--brand-mark-fg: #07111b;
|
|
--step-line: #23604c;
|
|
--setup-bg: #07111b;
|
|
--radius: 20px;
|
|
--content: 1160px;
|
|
--red: #d1667f;
|
|
--amber: #d7a35b;
|
|
}
|
|
|
|
:root[data-theme="light"] {
|
|
color-scheme: light;
|
|
--paper: #f7f8f5;
|
|
--surface: #ffffff;
|
|
--ink: #102f50;
|
|
--ink-soft: #38536c;
|
|
--muted: #718092;
|
|
--line: #e1e8e5;
|
|
--green: #149b72;
|
|
--green-dark: #087b5b;
|
|
--green-pale: #e8f5ef;
|
|
--blue-pale: #edf3f8;
|
|
--shadow: 0 18px 50px rgba(16, 47, 80, 0.08);
|
|
--button-hover: #087b5b;
|
|
--brand-mark-bg: #102f50;
|
|
--brand-mark-fg: #ffffff;
|
|
--step-line: #cce8da;
|
|
--setup-bg: #102f50;
|
|
--red: #b04a63;
|
|
--amber: #a9741f;
|
|
}
|
|
|
|
*, *::before, *::after { box-sizing: border-box; }
|
|
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
|
|
body {
|
|
margin: 0;
|
|
background: var(--paper);
|
|
color: var(--ink);
|
|
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
font-size: 16px;
|
|
line-height: 1.65;
|
|
-webkit-font-smoothing: antialiased;
|
|
text-rendering: optimizeLegibility;
|
|
}
|
|
|
|
a { color: inherit; }
|
|
img { display: block; max-width: 100%; }
|
|
.container { width: min(var(--content), calc(100% - 48px)); margin-inline: auto; }
|
|
.mono { font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; }
|
|
.muted { color: var(--muted); }
|
|
|
|
.site-header {
|
|
position: sticky;
|
|
z-index: 5;
|
|
top: 0;
|
|
border-bottom: 1px solid var(--line);
|
|
background: var(--paper);
|
|
backdrop-filter: blur(16px);
|
|
}
|
|
.nav {
|
|
min-height: 76px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 28px;
|
|
}
|
|
.wordmark {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 11px;
|
|
color: var(--ink);
|
|
text-decoration: none;
|
|
font-size: 18px;
|
|
font-weight: 850;
|
|
letter-spacing: 0.13em;
|
|
}
|
|
.wordmark-mark {
|
|
width: 34px;
|
|
height: 34px;
|
|
display: grid;
|
|
place-items: center;
|
|
border-radius: 11px;
|
|
background: var(--brand-mark-bg);
|
|
color: var(--brand-mark-fg);
|
|
font-size: 17px;
|
|
letter-spacing: 0;
|
|
}
|
|
.nav-links { display: flex; align-items: center; gap: 22px; }
|
|
.nav-links a {
|
|
color: var(--ink-soft);
|
|
font-size: 14px;
|
|
font-weight: 650;
|
|
text-decoration: none;
|
|
transition: color 160ms ease;
|
|
}
|
|
.nav-links a:hover { color: var(--green-dark); }
|
|
.nav-links .nav-cta {
|
|
padding: 10px 16px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 999px;
|
|
background: var(--surface);
|
|
color: var(--ink);
|
|
}
|
|
.nav-links .nav-cta:hover { border-color: var(--green); color: var(--green-dark); }
|
|
|
|
.theme-toggle {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 9px 13px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 999px;
|
|
background: var(--surface);
|
|
color: var(--ink-soft);
|
|
font: inherit;
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
|
|
}
|
|
.theme-toggle:hover { border-color: var(--green-dark); color: var(--green-dark); }
|
|
.theme-icon { color: var(--green-dark); font-size: 16px; line-height: 1; }
|
|
|
|
.section { padding: 46px 0 82px; }
|
|
.section-heading { max-width: 720px; margin-bottom: 26px; }
|
|
.section-heading h1 {
|
|
margin-bottom: 12px;
|
|
font-size: clamp(30px, 4vw, 44px);
|
|
line-height: 1.12;
|
|
letter-spacing: -0.045em;
|
|
}
|
|
.section-heading p { margin-bottom: 0; color: var(--muted); font-size: 17px; }
|
|
.eyebrow {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 9px;
|
|
margin: 0 0 16px;
|
|
color: var(--green-dark);
|
|
font-size: 12px;
|
|
font-weight: 800;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
}
|
|
.eyebrow::before {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background: var(--green);
|
|
content: "";
|
|
}
|
|
|
|
.button {
|
|
display: inline-flex;
|
|
min-height: 42px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 9px;
|
|
padding: 9px 16px;
|
|
border: 1px solid transparent;
|
|
border-radius: 999px;
|
|
background: var(--green);
|
|
color: white;
|
|
font: inherit;
|
|
font-size: 14px;
|
|
font-weight: 750;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease;
|
|
}
|
|
.button:hover { transform: translateY(-2px); background: var(--button-hover); box-shadow: 0 8px 20px rgba(20, 155, 114, 0.2); }
|
|
.button-secondary { border-color: var(--line); background: var(--surface); color: var(--ink); }
|
|
.button-secondary:hover { border-color: #b8d8ca; background: var(--green-pale); color: var(--green-dark); box-shadow: none; }
|
|
.arrow { font-size: 17px; line-height: 1; }
|
|
|
|
/* ---- Tableau de bord ---- */
|
|
|
|
.toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
margin-bottom: 22px;
|
|
}
|
|
|
|
.board {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 18px;
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
.panel {
|
|
padding: 22px;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius);
|
|
background: var(--surface);
|
|
box-shadow: 0 5px 20px rgba(16, 47, 80, 0.025);
|
|
}
|
|
.panel-head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
margin-bottom: 16px;
|
|
}
|
|
.panel-head h2 { margin: 0; font-size: 17px; letter-spacing: -0.02em; }
|
|
.count {
|
|
min-width: 26px;
|
|
padding: 3px 9px;
|
|
border-radius: 999px;
|
|
background: var(--blue-pale);
|
|
color: var(--ink);
|
|
font-size: 12px;
|
|
font-weight: 850;
|
|
text-align: center;
|
|
}
|
|
.detail-panel { margin-bottom: 18px; }
|
|
|
|
steep-job-list { display: grid; gap: 10px; }
|
|
|
|
.job {
|
|
border: 1px solid var(--line);
|
|
border-radius: 14px;
|
|
background: var(--paper);
|
|
transition: border-color 140ms ease, background 140ms ease;
|
|
}
|
|
.job:hover { border-color: var(--green); }
|
|
.job[data-selected="true"] { border-color: var(--green); background: var(--green-pale); }
|
|
|
|
.job-head {
|
|
display: grid;
|
|
grid-template-columns: auto 1fr auto;
|
|
align-items: baseline;
|
|
gap: 10px;
|
|
padding: 13px 15px;
|
|
cursor: pointer;
|
|
list-style: none;
|
|
}
|
|
.job-head::-webkit-details-marker { display: none; }
|
|
.job-repo { font-weight: 700; font-size: 14px; overflow-wrap: anywhere; }
|
|
.job-pr { color: var(--green-dark); font-weight: 800; font-size: 13px; white-space: nowrap; }
|
|
|
|
.job-info { display: grid; gap: 12px; padding: 0 15px 15px; }
|
|
.job-info dl { display: grid; gap: 6px; margin: 0; }
|
|
.job-info dl > div { display: grid; grid-template-columns: 74px 1fr; gap: 10px; }
|
|
.job-info dt { color: var(--muted); font-size: 12px; }
|
|
.job-info dd { margin: 0; font-size: 12px; overflow-wrap: anywhere; }
|
|
.job-watch { justify-self: start; }
|
|
|
|
/* Chevron partagé par tous les <details> repliables. */
|
|
.chev::before { color: var(--muted); content: "▸"; font-size: 11px; }
|
|
details[open] .chev::before { content: "▾"; }
|
|
|
|
.empty { margin: 0; padding: 14px 2px; color: var(--muted); font-size: 14px; }
|
|
|
|
.pill {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 3px 10px;
|
|
border-radius: 999px;
|
|
font-size: 12px;
|
|
font-weight: 800;
|
|
text-transform: lowercase;
|
|
}
|
|
.pill.done { background: var(--green-pale); color: var(--green-dark); }
|
|
.pill.failed { background: rgba(209, 102, 127, 0.16); color: var(--red); }
|
|
|
|
.reviews { overflow-x: auto; }
|
|
.reviews-table { width: 100%; border-collapse: collapse; font-size: 13px; }
|
|
.reviews-table th {
|
|
padding: 0 12px 10px 0;
|
|
border-bottom: 1px solid var(--line);
|
|
color: var(--muted);
|
|
font-size: 11px;
|
|
font-weight: 800;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
text-align: left;
|
|
}
|
|
.reviews-table td { padding: 11px 12px 11px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
|
|
.reviews-table tr:last-child td { border-bottom: 0; }
|
|
|
|
/* Journal d'activité d'un job */
|
|
.log {
|
|
max-height: 360px;
|
|
overflow-y: auto;
|
|
padding: 4px 2px;
|
|
font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
|
|
font-size: 12.5px;
|
|
line-height: 1.6;
|
|
}
|
|
.log-entry { display: grid; grid-template-columns: auto 1fr; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); }
|
|
.log-entry:last-child { border-bottom: 0; }
|
|
|
|
/* Résultat d'outil replié par défaut : le résumé tient sur une ligne, le corps
|
|
complet s'affiche au dépliage. */
|
|
.log-result { padding: 6px 0; border-bottom: 1px solid var(--line); }
|
|
.log-result:last-child { border-bottom: 0; }
|
|
.log-result > summary {
|
|
display: grid;
|
|
grid-template-columns: auto auto 1fr;
|
|
gap: 10px;
|
|
align-items: baseline;
|
|
cursor: pointer;
|
|
list-style: none;
|
|
}
|
|
.log-result > summary::-webkit-details-marker { display: none; }
|
|
.log-result > .log-body { padding-top: 6px; }
|
|
.log-preview { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.log-tag {
|
|
align-self: start;
|
|
padding: 2px 8px;
|
|
border-radius: 7px;
|
|
background: var(--blue-pale);
|
|
color: var(--ink);
|
|
font-size: 11px;
|
|
font-weight: 800;
|
|
white-space: nowrap;
|
|
}
|
|
.log-entry[data-kind="tool_call"] .log-tag { background: var(--green-pale); color: var(--green-dark); }
|
|
.log-entry[data-kind="finished"] .log-tag { background: var(--green-pale); color: var(--green-dark); }
|
|
.log-entry[data-kind="gap"] .log-tag { background: rgba(215, 163, 91, 0.18); color: var(--amber); }
|
|
.log-body { overflow-wrap: anywhere; white-space: pre-wrap; }
|
|
.log-args { color: var(--muted); }
|
|
.log-truncated { color: var(--amber); font-style: italic; }
|
|
|
|
footer { padding: 26px 0; background: #0b233b; color: #b6c5d3; font-size: 13px; }
|
|
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
|
|
footer a { color: white; text-decoration: none; }
|
|
footer a:hover { color: #8be0bc; }
|
|
.footer-brand { color: white; font-weight: 800; letter-spacing: 0.1em; }
|
|
|
|
:focus-visible { outline: 3px solid #35bb8e; outline-offset: 4px; }
|
|
|
|
@media (max-width: 820px) {
|
|
.board { grid-template-columns: 1fr; }
|
|
}
|
|
@media (max-width: 600px) {
|
|
.container { width: min(var(--content), calc(100% - 32px)); }
|
|
.nav { min-height: 66px; gap: 12px; }
|
|
.nav-links { gap: 12px; }
|
|
.nav-links .nav-cta { display: none; }
|
|
.section { padding: 30px 0 62px; }
|
|
.toolbar { flex-direction: column; align-items: stretch; }
|
|
.footer-inner { align-items: flex-start; flex-direction: column; gap: 6px; }
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
|
|
}
|