summaryrefslogtreecommitdiff
path: root/internal/adminui/assets/models.css
diff options
context:
space:
mode:
authorChia <Chia@93.nz>2026-08-06 09:29:41 +1200
committerChia <Chia@93.nz>2026-08-06 09:32:46 +1200
commit41e322c53d7b4b796eb377d0df9c29ecd10ba431 (patch)
treec730526150e55e39b822d5197e4a20318ecaa449 /internal/adminui/assets/models.css
parenteadb2ffe85c43cf6fc741c9823cd28eedb4a844c (diff)
feat: complete commercial control plane, billing, auth, and model catalog
- add PostgreSQL control-plane persistence with Redis-degraded hot reload - implement prepaid balance, usage ledger, Stripe top-up and reconciliation - add registration, email verification, password reset, invitations and RBAC - support TOTP, Passkey MFA, device sessions, quotas and rate limits - add tenant billing profiles, audit logs and operational readiness checks - build authenticated admin console, Quickstart, Playground and usage analytics - add public model catalog with pricing, filtering and cost estimation - support OpenAI Responses providers and provider health failover - validate real upstream usage reporting and balance settlement
Diffstat (limited to 'internal/adminui/assets/models.css')
-rw-r--r--internal/adminui/assets/models.css64
1 files changed, 64 insertions, 0 deletions
diff --git a/internal/adminui/assets/models.css b/internal/adminui/assets/models.css
new file mode 100644
index 0000000..dc7c9c9
--- /dev/null
+++ b/internal/adminui/assets/models.css
@@ -0,0 +1,64 @@
+:root { --bg:#f4f6f7; --panel:#fff; --ink:#17212b; --muted:#657583; --line:#d9e1e5; --nav:#102a3a; --accent:#146c94; --accent-soft:#e6f2f6; --good:#187151; --warn:#7b5e14; --bad:#a23f45; font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
+* { box-sizing:border-box; }
+body { margin:0; background:var(--bg); color:var(--ink); font-size:14px; }
+button,input,select { font:inherit; }
+button { cursor:pointer; }
+.catalog-header { min-height:66px; padding:12px max(24px,calc((100% - 1240px)/2)); display:flex; align-items:center; justify-content:space-between; gap:20px; background:var(--nav); }
+.catalog-brand { display:grid; grid-template-columns:38px auto; grid-template-rows:20px 14px; column-gap:10px; color:#fff; text-decoration:none; }
+.catalog-brand > span { grid-row:1/-1; width:38px; height:38px; border:1px solid #8fd0df; display:grid; place-items:center; color:#b8eef7; font-weight:800; }
+.catalog-brand strong { font-size:15px; align-self:end; }
+.catalog-brand small { color:#8ba9b9; font-size:9px; }
+.catalog-header nav { display:flex; gap:8px; }
+.button { min-height:40px; padding:0 15px; border:1px solid transparent; display:inline-flex; align-items:center; justify-content:center; font-weight:700; text-decoration:none; }
+.button.primary { color:#fff; background:var(--accent); }
+.button.secondary { color:var(--accent); background:#fff; border-color:var(--line); }
+.catalog-header .button.secondary { color:#b8eef7; background:transparent; border-color:#537486; }
+main { width:min(1240px,calc(100% - 48px)); margin:30px auto 64px; }
+.catalog-intro { display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:22px; }
+.eyebrow { color:var(--accent); font-size:10px; font-weight:800; }
+h1 { margin:7px 0 0; font-size:32px; line-height:1.1; }
+.catalog-stats { display:flex; gap:22px; color:var(--muted); font-size:12px; }
+.catalog-stats strong { display:block; color:var(--ink); font-size:20px; }
+.catalog-filters { display:grid; grid-template-columns:2fr repeat(4,minmax(0,1fr)); gap:12px; padding:18px; margin-bottom:18px; background:var(--panel); border:1px solid var(--line); }
+label { display:flex; flex-direction:column; gap:7px; color:var(--muted); font-size:12px; font-weight:650; }
+input,select { width:100%; min-height:40px; padding:9px 11px; border:1px solid var(--line); color:var(--ink); background:#fff; outline:none; }
+input:focus,select:focus { border-color:#69a9bf; box-shadow:0 0 0 3px var(--accent-soft); }
+.catalog-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
+.model-card { min-width:0; display:flex; flex-direction:column; gap:12px; padding:18px; background:var(--panel); border:1px solid var(--line); box-shadow:0 8px 24px rgba(29,47,61,.05); }
+.model-card header { display:flex; justify-content:space-between; align-items:start; gap:12px; }
+.model-card header small { color:var(--muted); }
+.model-card h2 { margin:4px 0 0; font-size:17px; overflow-wrap:anywhere; }
+.model-card > code { color:#486071; font-size:12px; overflow-wrap:anywhere; }
+.model-card > p { min-height:63px; margin:0; color:#526673; line-height:1.5; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
+.health { flex:0 0 auto; padding:4px 7px; border:1px solid var(--line); font-size:11px; white-space:nowrap; }
+.health.available { color:var(--good); background:#eaf7f0; border-color:#c7e9d9; }
+.health.degraded { color:var(--warn); background:#fff8dc; border-color:#e9d990; }
+.health.unavailable { color:var(--bad); background:#fff0f0; border-color:#f0cccc; }
+.model-tags,.detail-tags { display:flex; flex-wrap:wrap; gap:5px; }
+.model-tags span,.detail-tags span { padding:4px 7px; color:#4c6572; background:#eef3f5; font-size:11px; }
+.model-card dl { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin:0; padding-top:12px; border-top:1px solid var(--line); }
+.model-card dl div { min-width:0; }
+dt { color:var(--muted); font-size:10px; }
+dd { margin:5px 0 0; font-size:12px; font-weight:700; overflow-wrap:anywhere; }
+.model-card > .button { margin-top:auto; align-self:flex-start; }
+.catalog-status { padding:28px; color:var(--muted); text-align:center; background:#fff; border:1px solid var(--line); }
+.catalog-status[role="alert"] { color:var(--bad); background:#fff6f6; }
+.hidden { display:none !important; }
+dialog { width:min(720px,calc(100% - 32px)); max-height:calc(100vh - 32px); padding:0; border:0; box-shadow:0 18px 70px rgba(0,0,0,.25); }
+dialog::backdrop { background:rgba(16,42,58,.5); }
+.model-dialog { padding:24px; overflow:auto; }
+.model-dialog > header { display:flex; justify-content:space-between; align-items:start; gap:16px; padding-bottom:16px; border-bottom:1px solid var(--line); }
+.model-dialog h2 { margin:5px 0 5px; font-size:24px; }
+.model-dialog code { color:#486071; overflow-wrap:anywhere; }
+.icon-button { width:36px; height:36px; border:1px solid var(--line); background:#fff; color:var(--muted); font-size:23px; line-height:1; }
+.model-dialog > p { margin:18px 0; color:#526673; line-height:1.55; }
+.detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 22px; margin:18px 0; }
+.detail-grid > div { display:flex; justify-content:space-between; gap:14px; padding:11px 0; border-bottom:1px solid var(--line); }
+.detail-grid dd { text-align:right; }
+.price-estimator { padding-top:18px; border-top:1px solid var(--line); }
+.price-estimator h3 { margin:5px 0 14px; font-size:16px; }
+.estimate-inputs { display:grid; grid-template-columns:1fr 1fr 1fr; align-items:end; gap:12px; }
+.estimate-inputs output { min-height:40px; display:flex; align-items:center; justify-content:center; color:var(--good); background:#f0fbf5; border:1px solid #c7e9d9; font-weight:750; }
+.model-dialog footer { display:flex; justify-content:flex-end; gap:8px; margin-top:22px; }
+@media (max-width:900px) { .catalog-filters { grid-template-columns:repeat(2,minmax(0,1fr)); } .search-field { grid-column:1/-1; } .catalog-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
+@media (max-width:620px) { .catalog-header { padding:12px; } .catalog-brand small { display:none; } .catalog-header .button { padding:0 11px; } main { width:calc(100% - 24px); margin-top:20px; } .catalog-intro { align-items:start; flex-direction:column; } .catalog-stats { width:100%; justify-content:space-between; } .catalog-filters,.catalog-grid,.detail-grid,.estimate-inputs { grid-template-columns:1fr; } .search-field { grid-column:auto; } .model-card > p { min-height:0; } .model-dialog { padding:20px; } .model-dialog footer { flex-direction:column; } }