forked from forthfate/openorbit
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathstyles.css
More file actions
18 lines (17 loc) · 10.5 KB
/
Copy pathstyles.css
File metadata and controls
18 lines (17 loc) · 10.5 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,600;1,600&display=swap');
.toast-viewport { position:fixed; top:20px; right:20px; z-index:100; display:grid; width:min(380px,calc(100vw - 40px)); gap:10px; pointer-events:none; }
.notice { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; opacity:1; transform:translateY(0); transition:opacity .8s ease,transform .8s ease; border:1px solid; padding:10px 10px 10px 13px; border-radius:8px; font-size:12px; box-shadow:0 12px 30px rgb(0 0 0 / .26); }
.notice--success { border-color:#476835; color:#c7ef9f; background:#1d301a; }
.notice--warning { border-color:#725c31; color:#f2d394; background:#302818; }
.notice--error { border-color:#70403b; color:#f0b2aa; background:#2c1c1a; }
.toast-dismiss { flex:none; border:0; color:currentColor; background:transparent; padding:0 2px; opacity:.8; font-size:18px; line-height:14px; pointer-events:auto; }
.toast-dismiss:hover,.toast-dismiss:focus-visible { opacity:1; outline:0; }
@import "tailwindcss";
@import "./themes.css";
:root { font-family: Manrope, sans-serif; color: var(--text); background: var(--bg); font-synthesis: none; }
* { box-sizing: border-box; } html,body,#root { max-width:100%; overflow-x:hidden; } body { margin: 0; min-width:0; background: var(--bg); } button { font: inherit; cursor: pointer; } button:disabled { cursor: not-allowed; } main { display: flex; width:100%; min-width:0; min-height:100vh; overflow-x:hidden; }
aside { width: 244px; padding: 32px 19px; border-right: 1px solid var(--line); background: var(--surface); display: flex; flex-direction: column; } .brand { display: flex; align-items: center; gap: 9px; margin: 0 12px 48px; font-weight: 800; font-size: 21px; letter-spacing: -.9px; }.brand svg { color: var(--accent); } .eyebrow { color: var(--muted); margin: 0 0 7px; letter-spacing: 1.45px; font: 500 10px 'DM Mono', monospace; } nav { display: grid; gap: 6px; margin-top: 10px; } nav button { border:0; background:transparent; display:flex; align-items:center; gap:11px; color:var(--muted); border-radius:9px; padding:11px 12px; font-size:13px; text-align:left; } nav button.active { color:var(--text); background:var(--surface-raised); }.nav-run-count { display:inline-grid; min-width:20px; height:20px; margin-left:auto; padding:0 5px; place-items:center; border-radius:999px; background:var(--accent); color:var(--bg); font:700 10px/1 'DM Mono', monospace; }.side-note { margin: auto 12px 0; color:var(--muted); font-size:12px; line-height:1.8; }.pulse { width:7px; height:7px; border-radius:50%; display:inline-block; margin-right:6px; background:var(--accent); }
.content { flex:1; min-width:0; width:100%; max-width:none; padding:54px 64px 65px; margin:0; } header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:38px; } h1 { font-size:38px; letter-spacing:-1.9px; margin:0 0 9px; font-weight:700; } h1 em { color:#c5ef87; font: italic 600 39px 'Playfair Display', serif; letter-spacing:-1.4px; }.sub { margin:0; color:#94a19a; font-size:14px; }.health { border:1px solid #334239; color:#a7b4ac; background:#19231e; padding:9px 13px; border-radius:20px; font-size:12px; }.metrics { display:grid; grid-template-columns:repeat(3, 1fr); gap:15px; margin-bottom:16px; }.metric { min-height:130px; border:1px solid #2b3630; border-radius:12px; padding:20px; background:linear-gradient(125deg,#171f1b,#141a17); }.metric p { margin:0 0 13px; color:#94a19a; font-size:12px; }.metric strong { display:block; font:600 32px 'DM Mono'; letter-spacing:-2px; }.metric small { color:#6e7c74; font-size:11px; }.metric.amber strong { color:#f2d29b; }.grid,.lower-grid { display:grid; gap:16px; }.grid { grid-template-columns: .92fr 1.35fr; }.lower-grid { grid-template-columns:1.16fr .84fr; margin-top:16px; }.panel { min-width:0; background:#151c18; border:1px solid #2b3630; border-radius:12px; padding:23px; }.dashboard-panel + .dashboard-panel,.improvement-panel + .improvement-panel { margin-top:16px; }.panel-head { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:18px; }.panel h2 { font-size:17px; letter-spacing:-.5px; margin:0; }.ghost { border:0; background:none; color:#a9bb9d; display:flex; gap:5px; align-items:center; font-size:11px; }.workflow { width:100%; border:1px solid transparent; background:transparent; border-radius:10px; padding:11px 9px; display:flex; align-items:center; gap:10px; text-align:left; color:#dfe8df; }.workflow:hover,.workflow.selected { background:#1e2922; border-color:#344338; }.workflow-icon { width:34px; height:34px; display:grid; place-items:center; border-radius:8px; }.workflow-icon.simulation { color:#b9e8ef; background:#1c3538; }.workflow-icon.improvement { color:#d0e99b; background:#31432b; }.workflow-copy { flex:1; display:grid; gap:2px; }.workflow-copy strong { font-size:12px; }.workflow-copy small { color:#85928a; font-size:10px; }.enabled,.disabled,.risk,.badge { font:500 9px 'DM Mono'; padding:4px 6px; border-radius:4px; }.enabled { color:#b8e984; background:#294027; }.disabled { color:#959f9b; background:#27302b; }.description { color:#9ca9a1; font-size:12px; line-height:1.65; margin:-4px 0 17px; }.risk { color:#eba9a2; background:#402824;}.risk.medium { color:#ead09a; background:#403523; }.steps { border-top:1px solid #29342d; }.step { display:flex; gap:14px; align-items:center; padding:13px 2px; border-bottom:1px solid #29342d; }.step>span { color:#77867d; font:10px 'DM Mono'; }.step div { flex:1; display:grid; gap:4px; }.step strong { font-size:12px; }.step code { font:9px 'DM Mono'; color:#82998d; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.step svg { color:#d5d392; }.run-button { width:100%; border:0; border-radius:8px; padding:12px; background:#c7ee8e; color:#1a2418; font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center; gap:8px; margin-top:18px; }.run-button:disabled { cursor:not-allowed; color:#718070; background:#28332c; }.approval { display:flex; justify-content:space-between; align-items:center; padding:12px 0; border-top:1px solid #29342d; }.approval:first-of-type { border-top:0; }.approval div:first-child { display:grid; gap:4px; }.approval strong,.history-row strong { font-size:12px; }.approval small,.history-row small { color:#839088; font-size:10px; }.approval-actions { display:flex; gap:6px; }.approve,.reject { border-radius:6px; border:0; padding:6px 9px; font-size:10px; }.approve { background:#bde982; color:#1b2819; }.reject { background:#2c3630; color:#b7c2ba; }.history-row { display:flex; align-items:center; gap:10px; padding:10px 0; border-top:1px solid #29342d; }.history-row>div { display:grid; gap:3px; flex:1; }.dot { width:7px; height:7px; border-radius:50%; }.dot.good { background:#bce989; }.dot.run { background:#85cfe0; }.dot.wait { background:#f1cf88; }.dot.bad { background:#e99c92; }.dot.muted { background:#7d8881; }.badge.good { color:#bce989; background:#283d29; }.badge.run { color:#99daeb; background:#223c40; }.badge.wait { color:#f1d292; background:#403420; }.badge.bad { color:#eaa89f; background:#402624; }.badge.muted { color:#a8b0ab; background:#29322d; }.empty { min-height:93px; color:#708078; display:grid; place-items:center; gap:8px; align-content:center; font-size:11px; }.empty svg { width:20px; }
.provider { display:grid; grid-template-columns:1.5fr repeat(5, minmax(100px, 1fr)); gap:9px; align-items:end; margin-bottom:16px; }.provider small { color:#738078; font-size:10px; }.provider input,.provider select { border:1px solid #334139; border-radius:7px; background:#101613; color:#d9e4dc; padding:9px; min-width:0; font-size:11px; outline:none; }.provider .save { border:0; border-radius:7px; background:#c7ee8e; color:#1a2418; padding:10px; font-size:11px; font-weight:800; }
.app-settings { display:grid; grid-template-columns:repeat(2,minmax(220px,1fr)); gap:16px; }.app-settings .panel-head { grid-column:1/-1; }.app-settings label { display:grid; gap:7px; color:#aeb8b1; font-size:12px; }.app-settings select { border:1px solid #334139; border-radius:7px; background:#101613; color:#d9e4dc; padding:10px; font:inherit; }.build-create { display:grid; grid-template-columns:repeat(3,minmax(180px,1fr)); gap:9px; margin-bottom:16px; }.build-create .panel-head { grid-column:1/-1; margin-bottom:4px; }.build-create input,.build-create select { min-width:0; padding:9px; border:1px solid #334139; border-radius:7px; background:#101613; color:#d9e4dc; font-size:11px; }
.emergency { border:1px solid #75423d; background:#3c2422; color:#f2b3ac; border-radius:8px; padding:10px 13px; display:flex; align-items:center; gap:7px; font-size:11px; }.side-note select { width:100%; margin-top:8px; border:1px solid #354239; background:#19231e; color:#bec9c1; padding:7px; border-radius:6px; font-size:11px; }.builder { display:grid; grid-template-columns:repeat(4, 1fr); gap:9px; margin-bottom:16px; }.builder .panel-head { grid-column:1/-1; margin-bottom:4px; }.builder input,.builder select { min-width:0; padding:9px; border:1px solid #334139; border-radius:7px; background:#101613; color:#d9e4dc; font-size:11px; }.builder button { justify-content:center; display:flex; align-items:center; gap:5px; }.builder-actions { grid-column:1/-1; display:flex; align-items:center; justify-content:flex-end; gap:9px; padding-top:14px; margin-top:5px; border-top:1px solid #29342d; }.builder-actions small { margin-right:auto; color:#809088; font-size:11px; }.table { overflow-x:auto; }.tr { min-width:850px; display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); border-top:1px solid #29342d; }.tr span { padding:11px 8px; color:#aeb8b1; font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.tr.th span { color:#738078; font:10px 'DM Mono'; text-transform:uppercase; }.tr span:first-child { color:#e2eae2; font-weight:600; }.hint { color:#809088; font-size:11px; margin:15px 0 0; }.chart-row { display:grid; grid-template-columns:230px 1fr 60px; align-items:center; gap:16px; padding:12px 0; border-top:1px solid #29342d; font-size:11px; }.chart-row div { height:12px; background:#29342d; position:relative; border-radius:8px; overflow:hidden; }.chart-row i,.chart-row b { position:absolute; height:100%; left:0; border-radius:8px; }.chart-row i { background:#66786c; }.chart-row b { background:#c7ee8e; opacity:.72; }.chart-row strong { color:#c7ee8e; }.run-build { display:grid; gap:3px; }.run-build strong { font-size:12px; }.run-build small { color:#839088; font-size:10px; }.icon-button.danger { color:#efaaa2; border-color:#70403b; background:#2c1c1a; }