60 lines
11 KiB
CSS
60 lines
11 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700&display=swap');
|
|
|
|
:root { color: #e9eee9; background: #101512; font-family: Manrope, sans-serif; font-synthesis: none; --ink: #e9eee9; --muted: #8f9b94; --panel: #171e1a; --line: #2b352f; --acid: #b8f34a; --orange: #ff8a52; }
|
|
* { box-sizing: border-box; }
|
|
body { margin: 0; min-width: 320px; min-height: 100vh; background: radial-gradient(circle at 80% 0, #1c2921 0, transparent 32%), #101512; }
|
|
button, input, textarea, select { font: inherit; }
|
|
button { cursor: pointer; }
|
|
button:disabled { cursor: default; opacity: .4; }
|
|
.loading { display: grid; place-items: center; min-height: 100vh; color: var(--muted); }
|
|
.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; background-image: linear-gradient(#ffffff06 1px, transparent 1px), linear-gradient(90deg, #ffffff06 1px, transparent 1px); background-size: 48px 48px; }
|
|
.login-card { width: min(440px, 100%); background: #171e1af2; border: 1px solid var(--line); padding: 48px; box-shadow: 18px 18px 0 #0a0d0b; }
|
|
.mark { width: 58px; height: 58px; display: grid; place-items: center; background: var(--acid); color: #101512; font: 700 18px DM Mono; clip-path: polygon(0 0, 84% 0, 100% 16%, 100% 100%, 16% 100%, 0 84%); margin-bottom: 34px; }
|
|
.mark.small { width: 42px; height: 42px; font-size: 14px; margin: 0; }
|
|
.eyebrow { color: var(--acid) !important; font: 500 11px DM Mono; letter-spacing: .14em; margin: 0 0 10px; }
|
|
h1, h2, h3, p { margin-top: 0; }
|
|
h1 { font-size: clamp(32px, 5vw, 52px); letter-spacing: -.05em; line-height: 1; margin-bottom: 14px; }
|
|
h2 { font-size: 18px; letter-spacing: -.02em; margin-bottom: 0; }
|
|
h3 { margin-bottom: 4px; }
|
|
.muted, .page-title > p { color: var(--muted); }
|
|
form { display: grid; gap: 18px; }
|
|
label { display: grid; gap: 8px; color: #c4cec8; font-size: 13px; font-weight: 600; }
|
|
label small { color: var(--muted); font-weight: 400; }
|
|
input, textarea, select { width: 100%; color: var(--ink); background: #0d120f; border: 1px solid #354139; border-radius: 0; padding: 12px 13px; outline: none; }
|
|
input:focus, textarea:focus, select:focus { border-color: var(--acid); box-shadow: 0 0 0 1px var(--acid); }
|
|
textarea { resize: vertical; font-family: DM Mono, monospace; font-size: 12px; }
|
|
button { color: #111713; background: var(--acid); border: 0; padding: 12px 17px; font-weight: 700; }
|
|
.error { color: #ffc0a5; background: #351e16; border-left: 3px solid var(--orange); padding: 10px; font-size: 13px; }
|
|
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 230px 1fr; }
|
|
aside { border-right: 1px solid var(--line); padding: 28px 20px; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; background: #101512dd; backdrop-filter: blur(12px); }
|
|
.brand { display: flex; align-items: center; gap: 12px; margin-bottom: 54px; }
|
|
.brand strong, .brand small { display: block; }.brand small { color: var(--muted); font: 10px DM Mono; letter-spacing: .18em; margin-top: 3px; }
|
|
nav { display: grid; gap: 5px; }
|
|
nav button { background: transparent; color: var(--muted); text-align: left; text-transform: capitalize; display: flex; gap: 14px; align-items: center; padding: 12px; }
|
|
nav button span { font: 10px DM Mono; color: #536158; }
|
|
nav button.active { color: var(--ink); background: #1c251f; box-shadow: inset 3px 0 var(--acid); }
|
|
nav button.active span { color: var(--acid); }
|
|
.logout { margin-top: auto; background: transparent; border: 1px solid var(--line); color: var(--muted); }
|
|
.content { padding: 52px clamp(24px, 5vw, 76px) 80px; min-width: 0; }
|
|
.page-title { margin-bottom: 42px; max-width: 680px; }.page-title h1 { margin-bottom: 12px; }.page-title > p:last-child { line-height: 1.6; }
|
|
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 22px; }
|
|
.metric { min-height: 130px; padding: 19px; background: var(--panel); border: 1px solid var(--line); display: flex; flex-direction: column; justify-content: space-between; }
|
|
.metric span { color: var(--muted); font: 11px DM Mono; text-transform: uppercase; letter-spacing: .1em; }.metric strong { font: 500 42px DM Mono; }.metric.accent { background: var(--acid); color: #101512; border-color: var(--acid); }.metric.accent span { color: #394c17; }.metric.warning strong { color: var(--orange); }
|
|
.panel { background: var(--panel); border: 1px solid var(--line); min-width: 0; }
|
|
.panel-head { padding: 19px 21px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }.panel-head > span { color: var(--muted); font: 10px DM Mono; text-transform: uppercase; }.panel-head .eyebrow { margin-bottom: 7px; }
|
|
.table-wrap { overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-size: 13px; } th { color: #6f7d74; font: 10px DM Mono; letter-spacing: .1em; text-transform: uppercase; text-align: left; } th, td { padding: 15px 20px; border-bottom: 1px solid #252e29; } tbody tr:hover { background: #1c251f; }
|
|
.mono { font-family: DM Mono, monospace; font-size: 12px; }.text-button { padding: 0; background: transparent; color: var(--acid); font: 12px DM Mono; }
|
|
.status { display: inline-flex; align-items: center; gap: 7px; font: 10px DM Mono; text-transform: uppercase; color: #b1bbb5; }.status i { width: 7px; height: 7px; border-radius: 50%; background: #738078; }.status.succeeded i { background: var(--acid); box-shadow: 0 0 10px #b8f34a88; }.status.failed { color: #ffad87; }.status.failed i { background: var(--orange); }.status.running i, .status.queued i { background: #ffe06a; animation: pulse 1s infinite alternate; } @keyframes pulse { to { opacity: .25; } }
|
|
.status.succeeded_with_warnings { color: #ffe08a; }.status.succeeded_with_warnings i { background: #ffe06a; }
|
|
.split { display: grid; grid-template-columns: minmax(380px, .9fr) minmax(440px, 1.1fr); gap: 20px; align-items: start; }.jobs-split { grid-template-columns: minmax(440px, 1fr) minmax(400px, .9fr); }.form-panel form { padding: 22px; }.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }.field-row.wide { grid-template-columns: 1fr 100px; }.input-action { display: flex; }.input-action button { white-space: nowrap; }.segmented { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }.segmented button { background: #121814; color: var(--muted); }.segmented button.selected { background: #263126; color: var(--acid); }
|
|
.form-message { color: #cfdbc9; border-left: 2px solid var(--acid); padding-left: 10px; font-size: 13px; }.empty { color: var(--muted); padding: 50px 25px; text-align: center; font-size: 13px; }
|
|
.form-actions { display: flex; gap: 8px; }.form-actions .secondary { background: transparent; border: 1px solid var(--line); color: var(--muted); }
|
|
.settings-stack { display: grid; gap: 20px; max-width: 700px; }.settings-stack .settings-panel { max-width: none; }.restore-panel form > p { line-height: 1.6; margin-bottom: 0; }.restore-preview { display: grid; gap: 6px; padding: 15px; border: 1px solid #435047; background: #121814; font: 11px DM Mono; }.restore-preview span, .restore-preview small { color: var(--muted); }.restore-button { background: var(--orange); }
|
|
.host-card, .job-card { padding: 19px 21px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 15px; }.host-card:last-child, .job-card:last-child { border: 0; }.host-card p, .job-card p { color: var(--muted); margin-bottom: 5px; font-size: 12px; }.host-card small, .job-card small { color: #718078; font: 9px DM Mono; overflow-wrap: anywhere; }.host-icon { width: 43px; height: 43px; flex: 0 0 43px; border: 1px solid #435047; display: grid; place-items: center; color: var(--acid); font: 11px DM Mono; }.card-actions { display: flex; gap: 6px; margin-left: auto; }.card-actions button { padding: 8px 10px; font-size: 11px; background: #2b382f; color: #dbe4de; }.card-actions .run { background: var(--acid); color: #111713; }.card-actions .danger { background: transparent; color: #c6866b; border: 1px solid #513429; }
|
|
fieldset { border: 1px solid var(--line); padding: 18px; display: grid; gap: 16px; } legend { color: var(--acid); padding: 0 8px; font: 10px DM Mono; letter-spacing: .08em; text-transform: uppercase; }.check { display: flex; grid-template-columns: 18px 1fr; align-items: center; }.check input { width: 16px; height: 16px; accent-color: var(--acid); }.job-card { align-items: flex-start; }.job-type { display: inline-block; color: var(--acid); border: 1px solid #3d4d3f; padding: 3px 6px; margin-bottom: 10px; font: 9px DM Mono; text-transform: uppercase; }.settings-panel { max-width: 700px; }.settings-panel form { padding: 24px; }
|
|
.step-list { display: grid; gap: 14px; }.step-card { background: #121814; border-color: #354139; }.step-head { display: grid; grid-template-columns: minmax(120px, 1fr) auto auto; gap: 10px; align-items: center; }.step-head input { font-weight: 700; }.step-head .job-type { margin: 0; }.step-actions { display: flex; gap: 3px; }.step-actions button { padding: 8px 10px; background: #28332c; color: var(--ink); }.step-actions button:disabled { opacity: .25; cursor: default; }.add-step { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 14px; border: 1px dashed #435047; }.step-policy { align-items: end; padding-top: 4px; border-top: 1px solid var(--line); }
|
|
.step-empty { border: 1px dashed #435047; padding: 28px 20px; }
|
|
.modal-backdrop { position: fixed; inset: 0; background: #050806cf; display: grid; place-items: center; padding: 22px; z-index: 10; }.modal { width: min(800px, 100%); max-height: 88vh; overflow: auto; background: #171e1a; border: 1px solid #4a584f; box-shadow: 22px 22px 0 #050705; padding-bottom: 22px; }.modal > :not(.panel-head) { margin-left: 22px; margin-right: 22px; }.modal .close { color: var(--muted); background: transparent; border: 1px solid var(--line); padding: 8px 12px; }.modal > .status { margin-top: 18px; }.modal pre { padding: 17px; max-height: 330px; overflow: auto; background: #0b100d; border: 1px solid #29342d; color: #bdc9c1; font: 11px/1.7 DM Mono; white-space: pre-wrap; }.modal h3 { font-size: 13px; margin-top: 24px; }.artifact { display: flex; align-items: center; justify-content: space-between; color: var(--ink); text-decoration: none; border: 1px solid var(--line); padding: 12px; margin-top: 7px; font-size: 12px; }.artifact:hover { border-color: var(--acid); }.artifact small { display: block; color: #627069; font: 8px DM Mono; margin-top: 5px; }.artifact strong { color: var(--acid); font: 10px DM Mono; white-space: nowrap; }
|
|
@media (max-width: 1000px) { .split, .jobs-split { grid-template-columns: 1fr; }.metrics { grid-template-columns: 1fr 1fr; } }
|
|
@media (max-width: 680px) { .app-shell { display: block; }.content { padding: 30px 16px 90px; } aside { height: auto; position: fixed; inset: auto 0 0; z-index: 5; padding: 8px; border: 1px solid var(--line); }.brand, .logout { display: none; } nav { grid-template-columns: repeat(4, 1fr); } nav button { justify-content: center; font-size: 10px; padding: 11px 4px; } nav button span { display: none; }.metrics { gap: 7px; }.metric { min-height: 105px; }.metric strong { font-size: 32px; }.field-row, .field-row.wide, .step-head, .add-step { grid-template-columns: 1fr; }.split, .jobs-split { display: block; }.split > .panel { margin-bottom: 16px; }.host-card, .job-card { flex-wrap: wrap; }.card-actions { width: 100%; margin-left: 58px; }.job-card .card-actions { margin-left: 0; }.login-card { padding: 32px 24px; } }
|