diff options
Diffstat (limited to 'internal/adminui/assets/models.css')
| -rw-r--r-- | internal/adminui/assets/models.css | 64 |
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; } } |
