conductor

style.css (5845B)

---

 /* dashboard/style.css - the whole interface, one stylesheet */
 
 :root {
   --bg: #101214;
   --panel: #171a1d;
   --border: #272b30;
   --text: #dfe3e6;
   --muted: #8b949e;
   --link: #6cb6ff;
   --queued: #3a4046;
   --running: #b58900;
   --success: #2e7d32;
   --failed: #c62828;
   --skipped: #4a5058;
   --cancelled: #6a4a8a;
   --danger: #a33;
 }
 
 * { box-sizing: border-box; }
 
 body {
   margin: 0;
   background: var(--bg);
   color: var(--text);
   font: 14px/1.5 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
 }
 
 a { color: var(--link); text-decoration: none; }
 a:hover { text-decoration: underline; }
 
 code, pre, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
 
 header {
   display: flex;
   align-items: center;
   gap: 1.25rem;
   padding: .7rem 1.25rem;
   border-bottom: 1px solid var(--border);
   background: var(--panel);
 }
 
 header h1 { font-size: 1rem; margin: 0; font-weight: 600; }
 header h1 a { color: var(--text); }
 header nav { flex: 1; display: flex; gap: 1rem; }
 header nav a { color: var(--muted); }
 header nav a.on { color: var(--text); border-bottom: 2px solid var(--link); }
 header .session { display: flex; align-items: center; gap: .6rem; }
 header .session form { margin: 0; }
 
 .role {
   font-size: .7rem;
   text-transform: uppercase;
   letter-spacing: .04em;
   color: var(--muted);
   border: 1px solid var(--border);
   border-radius: .7rem;
   padding: 0 .4rem;
 }
 
 main { padding: 1.25rem; max-width: 1100px; margin: 0 auto; }
 
 h2 { font-size: 1.15rem; margin: 0 0 .75rem; }
 h3 { font-size: .95rem; margin: 0 0 .5rem; }
 
 .muted { color: var(--muted); }
 .error { color: #ff8b8b; }
 .ok { color: #7ddc8a; }
 
 table { width: 100%; border-collapse: collapse; margin: .5rem 0; }
 th, td { text-align: left; padding: .45rem .6rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
 th { color: var(--muted); font-weight: 500; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; }
 tbody tr:hover { background: #1b1f23; }
 
 .badge {
   display: inline-block;
   padding: .05rem .45rem;
   border-radius: .75rem;
   font-size: .72rem;
   background: var(--queued);
   color: #fff;
 }
 .badge.running { background: var(--running); color: #1a1a1a; }
 .badge.success { background: var(--success); }
 .badge.failed { background: var(--failed); }
 .badge.skipped { background: var(--skipped); }
 .badge.cancelled { background: var(--cancelled); }
 .badge.pending, .badge.queued { background: var(--queued); }
 
 .panel {
   background: var(--panel);
   border: 1px solid var(--border);
   border-radius: 6px;
   padding: .85rem 1rem;
   margin-bottom: 1rem;
 }
 .panel.narrow { max-width: 24rem; width: 100%; }
 .panel.secret { border-color: var(--running); }
 
 /* Centres a single panel, such as the sign in form, rather than leaving it
    stranded against the left edge of a wide page. */
 .center { display: flex; justify-content: center; padding-top: 2.5rem; }
 
 .row { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-bottom: .5rem; }
 .row > div { min-width: 7rem; }
 .label { color: var(--muted); font-size: .72rem; display: block; text-transform: uppercase; letter-spacing: .04em; }
 
 .stage { margin: 1rem 0; }
 .stage h3 { color: var(--muted); font-weight: 500; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; }
 
 .logpane { max-height: 32rem; overflow: auto; border: 1px solid var(--border); border-radius: 6px; background: #0b0d0f; }
 pre.log {
   margin: 0;
   padding: .75rem 1rem;
   white-space: pre-wrap;
   word-break: break-word;
   font-size: .82rem;
 }
 
 form { margin: 0; }
 .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .75rem; }
 label { display: block; color: var(--muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; }
 
 input, select {
   display: block;
   width: 100%;
   margin-top: .2rem;
   background: #0b0d0f;
   border: 1px solid var(--border);
   border-radius: 4px;
   color: var(--text);
   padding: .35rem .5rem;
   font-size: .9rem;
   text-transform: none;
   letter-spacing: normal;
 }
 input.wide { width: 100%; }
 
 button {
   background: #22262b;
   color: var(--text);
   border: 1px solid var(--border);
   border-radius: 4px;
   padding: .3rem .7rem;
   cursor: pointer;
   font-size: .85rem;
 }
 button:hover { background: #2b3036; }
 button.danger { border-color: var(--danger); color: #ff9c9c; }
 /* A button that has to sit on the same line as ordinary text. Inheriting
    the font and line height is what keeps a row with actions exactly as
    tall as a row without them; a button's own metrics are otherwise larger
    than the surrounding text and stretch the line box. */
 button.link {
   background: none;
   border: none;
   color: var(--link);
   padding: 0;
   margin: 0;
   font: inherit;
   line-height: inherit;
   vertical-align: baseline;
 }
 button.link:hover { text-decoration: underline; background: none; }
 button.link.danger { color: #ff9c9c; }
 
 a.button {
   display: inline-block;
   background: #22262b;
   border: 1px solid var(--border);
   border-radius: 4px;
   padding: .3rem .7rem;
   color: var(--text);
 }
 a.button:hover { text-decoration: none; background: #2b3036; }
 
 .actions { display: flex; gap: .5rem; align-items: center; margin-top: .75rem; flex-wrap: wrap; }
 
 /* Actions inside a table row stay an ordinary table cell. Making them a
    flex container would take them out of the row's baseline alignment and
    give the row a different height from every other one. */
 td.row-actions { white-space: nowrap; text-align: right; }
 td.row-actions button.link + button.link { margin-left: .9rem; }
 
 dialog {
   border: 1px solid var(--border);
   border-radius: 6px;
   background: var(--panel);
   color: var(--text);
   padding: 1.25rem;
   max-width: 28rem;
   width: 90%;
 }
 dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
 dialog .actions { justify-content: flex-end; margin-top: 1rem; }