Sync cezen-portal/ from live working copy (V1.0 GA polish + search-icon ordering fix)
Brings the ISO-packaged portal copy current with the live cezen-portal/ working directory, which had drifted across the entire V1.0 GA polish initiative (Phases 1-10) plus this session's topnav icon-order bugfix. - 52 existing files updated, 2 new pages added (about.html, health.html) - cgit/cezen-portal/ is now byte-identical to cezen-portal/ - Backend files (rag_ingest.py, cezen_license.py) already in sync; main.py intentionally left as-is (cgit is ahead there with workstation-category commercial-fit logic not yet backported to the live working copy) Next: rebuild the ISO (bash autoinstall/build-iso.sh) to bake this in.
This commit is contained in:
Jino Jose committed
1 parent
7540da04a8
commit
b3eec34158
57 files changed
+2832
-1354
No files matched your search
@@ -111,6 +111,47 @@ a { color: inherit; text-decoration: none; }
|
||||
}
|
||||
.icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none;
|
||||
stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
|
||||
.icon-svg {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
line-height: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.icon-svg svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
stroke: currentColor;
|
||||
fill: none;
|
||||
stroke-width: 1.75;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
.icon-xs { width: 12px; height: 12px; }
|
||||
.icon-sm { width: 14px; height: 14px; }
|
||||
.icon-md { width: 16px; height: 16px; }
|
||||
.icon-lg { width: 18px; height: 18px; }
|
||||
.icon-xl { width: 22px; height: 22px; }
|
||||
.icon-2xl { width: 28px; height: 28px; }
|
||||
.icon-3xl { width: 40px; height: 40px; }
|
||||
.icon-label {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.icon-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border-radius: 10px;
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text-secondary);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.badge-pill {
|
||||
display: inline-flex; align-items: center;
|
||||
@@ -1409,4 +1450,242 @@ a.btn-primary:hover {
|
||||
.stat-num.stat-done { animation: none; opacity: 1; }
|
||||
.task-card, .feature-card, .tool-card, .help-card,
|
||||
.btn-primary, .btn-secondary { transition: none; }
|
||||
#cezen-toast-stack .cezen-toast { animation: none; }
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════
|
||||
Shared Toast / Notification Component
|
||||
Single source of truth for transient success/error/warning/info
|
||||
messages. Use window.showToast(message, type, opts) from any page
|
||||
(loaded globally via branding.js) instead of a page-local toast.
|
||||
═══════════════════════════════════════════════════════════════ */
|
||||
#cezen-toast-stack {
|
||||
position: fixed;
|
||||
bottom: 24px;
|
||||
right: 24px;
|
||||
z-index: 10000;
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
gap: 10px;
|
||||
max-width: 360px;
|
||||
}
|
||||
.cezen-toast {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
background: var(--surface);
|
||||
color: var(--text-primary);
|
||||
border: 1px solid var(--border);
|
||||
border-left: 4px solid var(--border-strong);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 12px 14px;
|
||||
font-size: 13px;
|
||||
line-height: 1.45;
|
||||
box-shadow: var(--shadow-lg);
|
||||
animation: cezen-toast-in 220ms cubic-bezier(.16,1,.3,1) both;
|
||||
}
|
||||
.cezen-toast.leaving { animation: cezen-toast-out 160ms ease both; }
|
||||
@keyframes cezen-toast-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
|
||||
@keyframes cezen-toast-out { from { opacity: 1; } to { opacity: 0; transform: translateY(4px); } }
|
||||
.cezen-toast .icon-svg { flex-shrink: 0; margin-top: 1px; }
|
||||
.cezen-toast-body { flex: 1; min-width: 0; }
|
||||
.cezen-toast-close {
|
||||
flex-shrink: 0; border: none; background: none; cursor: pointer;
|
||||
color: var(--text-tertiary); font-size: 15px; line-height: 1; padding: 2px;
|
||||
}
|
||||
.cezen-toast-close:hover { color: var(--text-primary); }
|
||||
.cezen-toast.success { border-left-color: var(--green); }
|
||||
.cezen-toast.success .icon-svg { color: var(--green); }
|
||||
.cezen-toast.error { border-left-color: var(--red); }
|
||||
.cezen-toast.error .icon-svg { color: var(--red); }
|
||||
.cezen-toast.warn { border-left-color: var(--amber); }
|
||||
.cezen-toast.warn .icon-svg { color: var(--amber); }
|
||||
.cezen-toast.info { border-left-color: var(--brand); }
|
||||
.cezen-toast.info .icon-svg { color: var(--brand); }
|
||||
|
||||
/* ── Shared "Overall Status" health rollup chip ─────────────────
|
||||
Drop into any .page-hero: <div class="overall-health" id="...">
|
||||
with a .overall-health-dot (healthy/warn/crit/loading) and label.
|
||||
─────────────────────────────────────────────────────────────── */
|
||||
.overall-health {
|
||||
display: inline-flex; align-items: center; gap: 10px;
|
||||
margin-top: 16px; padding: 8px 14px;
|
||||
background: var(--surface); border: 1px solid var(--border);
|
||||
border-radius: var(--radius-pill); font-size: 13px;
|
||||
}
|
||||
.overall-health-dot {
|
||||
width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
|
||||
}
|
||||
.overall-health-dot.loading { background: var(--border-strong); }
|
||||
.overall-health-dot.healthy { background: var(--green); box-shadow: 0 0 0 3px rgba(22,163,74,.15); }
|
||||
.overall-health-dot.warn { background: var(--amber); box-shadow: 0 0 0 3px rgba(217,119,6,.15); }
|
||||
.overall-health-dot.crit { background: var(--red); box-shadow: 0 0 0 3px rgba(220,38,38,.15); animation: overall-health-pulse 1.6s ease-in-out infinite; }
|
||||
@keyframes overall-health-pulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
|
||||
.overall-health-label { font-weight: 600; color: var(--text-primary); }
|
||||
.overall-health-link { color: var(--brand); text-decoration: none; font-weight: 600; margin-left: 4px; }
|
||||
.overall-health-link:hover { text-decoration: underline; }
|
||||
|
||||
/* ── Shared confirmation modal (replaces native confirm()) ────── */
|
||||
#cezen-confirm-modal {
|
||||
display: none;
|
||||
position: fixed; inset: 0; z-index: 10001;
|
||||
align-items: center; justify-content: center;
|
||||
}
|
||||
#cezen-confirm-modal.cezen-modal-open { display: flex; }
|
||||
#cezen-confirm-backdrop {
|
||||
position: absolute; inset: 0;
|
||||
background: rgba(15,23,42,.45);
|
||||
}
|
||||
#cezen-confirm-box {
|
||||
position: relative;
|
||||
background: var(--surface);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 24px 26px;
|
||||
max-width: 400px;
|
||||
width: calc(100% - 40px);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
#cezen-confirm-title { font-size: 16px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
|
||||
#cezen-confirm-body { font-size: 13.5px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 20px; }
|
||||
#cezen-confirm-actions { display: flex; justify-content: flex-end; gap: 10px; }
|
||||
.btn-danger {
|
||||
padding: 9px 18px; border-radius: var(--radius-md); border: none;
|
||||
font-size: 13.5px; font-weight: 600; cursor: pointer; font-family: inherit;
|
||||
background: var(--red); color: #fff; transition: background var(--t-base) var(--ease);
|
||||
}
|
||||
.btn-danger:hover { background: #B91C1C; }
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════
|
||||
Shared list/panel empty-state line
|
||||
For compact spots (sidebars, small tables, cards) where a full
|
||||
.wf-empty-style hero panel is too heavy — one line explaining why
|
||||
it's empty plus an inline actionable link. Pattern established by
|
||||
models-admin.html / apikeys.html, standardized here so every list
|
||||
in the product uses the same look.
|
||||
Usage: <div class="cezen-list-empty">No agents yet — <a onclick="...">create your first one</a>.</div>
|
||||
═══════════════════════════════════════════════════════════════ */
|
||||
.cezen-list-empty {
|
||||
padding: 20px 16px;
|
||||
font-size: 12.5px;
|
||||
color: var(--text-tertiary);
|
||||
text-align: center;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.cezen-list-empty a,
|
||||
.cezen-list-empty button.cezen-list-empty-cta {
|
||||
color: var(--brand);
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
}
|
||||
.cezen-list-empty a:hover,
|
||||
.cezen-list-empty button.cezen-list-empty-cta:hover { text-decoration: underline; }
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════
|
||||
Global command palette (Ctrl/Cmd+K)
|
||||
Single cross-page "jump to" search — no global search of any kind
|
||||
existed anywhere in the product before this. Injected once by
|
||||
branding.js on every page; static page index, no backend calls.
|
||||
═══════════════════════════════════════════════════════════════ */
|
||||
.nav-search-btn { border: none; background: none; cursor: pointer; font: inherit; }
|
||||
|
||||
/* Top-nav icon-cluster order (search, bell, tier badge, org logo) is enforced
|
||||
by JS — see normalizeNavIconCluster() in branding.js, which physically
|
||||
moves these elements into a single canonical .nav-right container in a
|
||||
fixed sequence on every page load. Do NOT add flexbox `order` rules here:
|
||||
they only apply within an element's immediate flex-container context, so
|
||||
they can't reconcile pages whose elements start out nested differently —
|
||||
and worse, a stray `order` on one sibling but not another (e.g. matching
|
||||
.nav-tier-badge but not the plain .badge class some pages use) silently
|
||||
overrides the correct DOM order those pages already have. Fix mis-ordering
|
||||
in the DOM (JS), not with `order`. */
|
||||
#cezen-cmdk {
|
||||
display: none;
|
||||
position: fixed; inset: 0; z-index: 10002;
|
||||
align-items: flex-start; justify-content: center;
|
||||
padding-top: 12vh;
|
||||
}
|
||||
#cezen-cmdk.cezen-cmdk-open { display: flex; }
|
||||
#cezen-cmdk-backdrop {
|
||||
position: absolute; inset: 0;
|
||||
background: rgba(15,23,42,.5);
|
||||
}
|
||||
#cezen-cmdk-box {
|
||||
position: relative;
|
||||
background: var(--surface);
|
||||
border-radius: var(--radius-lg);
|
||||
width: calc(100% - 40px);
|
||||
max-width: 560px;
|
||||
max-height: 60vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: var(--shadow-lg);
|
||||
overflow: hidden;
|
||||
}
|
||||
#cezen-cmdk-input-wrap {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
padding: 14px 16px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
#cezen-cmdk-input-wrap .icon-svg { color: var(--text-tertiary); flex-shrink: 0; }
|
||||
#cezen-cmdk-input {
|
||||
flex: 1; border: none; outline: none; background: none;
|
||||
font-size: 15px; font-family: inherit; color: var(--text-primary);
|
||||
}
|
||||
#cezen-cmdk-hint {
|
||||
font-size: 11px; color: var(--text-tertiary);
|
||||
border: 1px solid var(--border); border-radius: 4px;
|
||||
padding: 1px 6px; flex-shrink: 0;
|
||||
}
|
||||
#cezen-cmdk-results { overflow-y: auto; padding: 6px; }
|
||||
.cezen-cmdk-item {
|
||||
display: flex; align-items: center; justify-content: space-between; gap: 10px;
|
||||
padding: 10px 12px; border-radius: var(--radius-md);
|
||||
cursor: pointer; text-decoration: none; color: inherit;
|
||||
}
|
||||
.cezen-cmdk-item:hover, .cezen-cmdk-item.active { background: var(--bg); }
|
||||
.cezen-cmdk-item-label { font-size: 13.5px; font-weight: 600; color: var(--text-primary); }
|
||||
.cezen-cmdk-item-cat { font-size: 11px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .04em; }
|
||||
#cezen-cmdk-empty { padding: 24px 16px; text-align: center; color: var(--text-tertiary); font-size: 13px; }
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════
|
||||
Shared contextual-help tooltip
|
||||
For fields/concepts that aren't self-explanatory (guardrail rule
|
||||
types, router conditions, agent step types, etc.) — a small "?"
|
||||
affordance with a CSS-only tooltip, keyboard-accessible via focus.
|
||||
Usage: <span class="cezen-help" tabindex="0" data-tip="Explanation here.">?</span>
|
||||
═══════════════════════════════════════════════════════════════ */
|
||||
.cezen-help {
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
width: 15px; height: 15px; border-radius: 50%;
|
||||
background: var(--border-strong); color: var(--text-secondary);
|
||||
font-size: 10px; font-weight: 700; line-height: 1;
|
||||
cursor: help; margin-left: 5px; position: relative;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.cezen-help:hover, .cezen-help:focus { background: var(--brand); color: #fff; outline: none; }
|
||||
.cezen-help::after {
|
||||
content: attr(data-tip);
|
||||
position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
|
||||
background: var(--text-primary); color: var(--surface);
|
||||
font-size: 11.5px; font-weight: 400; line-height: 1.45;
|
||||
padding: 8px 10px; border-radius: 6px; width: 230px;
|
||||
white-space: normal; text-align: left;
|
||||
box-shadow: var(--shadow-lg);
|
||||
opacity: 0; pointer-events: none;
|
||||
transition: opacity .12s ease;
|
||||
z-index: 500;
|
||||
}
|
||||
.cezen-help::before {
|
||||
content: ''; position: absolute; bottom: calc(100% + 3px); left: 50%; transform: translateX(-50%);
|
||||
border: 5px solid transparent; border-top-color: var(--text-primary);
|
||||
opacity: 0; transition: opacity .12s ease; z-index: 500;
|
||||
}
|
||||
.cezen-help:hover::after, .cezen-help:focus::after,
|
||||
.cezen-help:hover::before, .cezen-help:focus::before { opacity: 1; }
|
||||
Reference in new issue
Block a user