cai-exos-systems/daveadmin-exos-demo:assets/css/demo.css
assets/css/demo.css
rgba(240, 180, 41, 0.12); border: 1px solid rgba(240, 180, 41, 0.3); border-radius: 4px; padding: 0.1rem 0.4rem; flex-shrink: 0; } .mcp-live-pre { font-family: var(--font-mono); font-size: 0.63rem; color: var(--text-muted); background: rgba(0, 0, 0, 0.3); padding: 0.7rem 0.85rem; margin: 0; overflow-x: auto; overflow-y: auto; max-height: 260px; line-height: 1.6; white-space: pre; } /* ── MCP trace card Microsoft styling ────────────────────── */ .trace-card.mcp .trace-badge.mcp { background: rgba(0, 120, 212, 0.18); color: #50c8f4; border: 1px solid rgba(0, 120, 212, 0.35); }
/* ═══════════════════════════════════════════════════════════
STACK SPLASH SCREEN
═══════════════════════════════════════════════════════════ */
.stack-splash {
position: fixed; inset: 0; z-index: 9000;
background: #05091a;
display: flex; align-items: center; justify-content: center;
transition: opacity 0.38s ease;
}
.stack-splash.stack-splash-fadeout { opacity: 0; pointer-events: none; }
.stack-splash.stack-splash-gone { display: none; }
.stack-splash-inner {
display: flex; flex-direction: column; align-items: center;
gap: 2.5rem; padding: 2rem; max-width: 840px; width: 100%;
}
.stack-splash-logo {
display: flex; align-items: center; gap: 1rem;
}
.stack-splash-logomark {
width: 48px; height: 48px; border-radius: 10px;
background: linear-gradient(135deg, #0094d4, #00d2ff);
display: flex; align-items: center; justify-content: center;
font-weight: 800; font-size: 1rem; color: #05091a; letter-spacing: 0.04em; flex-shrink: 0;
}
.stack-splash-brand { font-size: 1.35rem; font-weight: 700; color: var(--text); letter-spacing: -0.02em; }
.stack-splash-sub { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.2rem; }
.stack-cards { display: flex; align-items: center; gap: 1.5rem; width: 100%; }
.stack-card-or { font-size: 0.75rem; color: var(--text-dim); flex-shrink: 0; text-transform: uppercase; letter-spacing: 0.1em; }
.stack-card {
flex: 1; display: flex; flex-direction: column; gap: 0.75rem;
padding: 1.75rem 1.5rem; border-radius: 14px; cursor: pointer;
text-align: left; border: 1.5px solid rgba(255,255,255,0.08);
background: rgba(255,255,255,0.03);
transition: border-color 0.2s, background 0.2s, transform 0.15s;
position: relative;
}
.stack-card:hover { transform: translateY(-2px); }
.stack-card-bnl:hover { border-color: rgba(240,180,41,0.5); background: rgba(240,180,41,0.05); }
.stack-card-zava:hover { border-color: rgba(0,180,160,0.5); background: rgba(0,180,160,0.05); }
.stack-card-live {
position: absolute; top: 1rem; right: 1rem;
display: flex; align-items: center; gap: 0.3rem;
font-size: 0.62rem; font-weight: 700; color: var(--teal);
letter-spacing: 0.06em; text-transform: uppercase;
}
.stack-card-icon { font-size: 2rem; }
.stack-card-name { font-size: 1.05rem; font-weight: 700; color: var(--text); }
.stack-card-desc { font-size: 0.78rem; color: var(--text-muted); line-height: 1.55; }
.stack-card-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.25rem; }
.stack-card-tags span {
font-size: 0.63rem; padding: 0.15rem 0.5rem; border-radius: 4px;
background: rgba(255,255,255,0.06); color: var(--text-dim);
border: 1px solid rgba(255,255,255,0.08); white-space: nowrap;
}
.stack-card-bnl .stack-card-tags span { border-color: rgba(240,180,41,0.25); color: rgba(240,180,41,0.8); }
.stack-card-zava .stack-card-tags span { border-color: rgba(0,180,160,0.25); color: var(--teal); }
.stack-card-cta { font-size: 0.78rem; font-weight: 600; color: var(--text-muted); margin-top: 0.5rem; transition: color 0.15s; }
.stack-card-bnl:hover .stack-card-cta { color: #f0b429; }
.stack-card-zava:hover .stack-card-cta { color: var(--teal); }
.stack-splash-note { font-size: 0.68rem; color: var(--text-dim); opacity: 0.6; }
/* ── Stack indicator pills ───────────────────────────────── */
.stack-indicator { display: flex; align-items: center; gap: 0.3rem; margin-right: 0.5rem; }
.stack-pill {
font-size: 0.64rem; font-weight: 700; letter-spacing: 0.05em;
padding: 0.2rem 0.6rem; border-radius: 5px; cursor: pointer; border: none;
display: inline-flex; align-items: center;
transition: opacity 0.15s;
}
.stack-pill-bnl { background: rgba(240,180,41,0.12); color: #f0b429; }
.stack-pill-zava { background: rgba(0,180,160,0.12); color: var(--teal); }
.stack-pill.stack-pill-active { opacity: 1; cursor: default; }
.stack-pill:not(.stack-pill-active) { opacity: 0.4; }
.stack-pill:not(.stack-pill-active):hover { opacity: 0.85; }
/* Hide tabs that don't apply to Zava stack */
body[data-stack="zava"] [data-agent="quote"],
body[data-stack="zava"] [data-agent="super"] { display: none; }
body[data-stack="zava"] .mode-sep:first-of-type { display: none; }
body[data-stack="zava"] .agent-account-main { pointer-events: none; }
body[data-stack="zava"] .agent-account-actions { display: none; }
assets/css/demo.css MCP connector download button in connection card rows */ .mcp-conn-download { margin-left: auto; padding: 0.18rem 0.55rem; font-size: 0.65rem; font-weight: 600; white-space: nowrap; border-radius: 4px; text-decoration: none; background: rgba(0,210,255,0.08); border: 1px solid rgba(0,210,255,0.25); color: var(--cyan); transition: background 0.15s, border-color 0.15s; } .mcp-conn-download:hover { background: rgba(0,210,255,0.18); border-color: rgba(0,210,255,0.5); } /* "Copilot Studio ↓" highlight in registry export rows */ .creator-export-link-copilot { background: rgba(0,210,255,0.10) !important; border-color: rgba(0,210,255,0.35) !important; color: var(--cyan) !important; } .creator-export-link-copilot:hover { background: rgba(0,210,255,0.22) !important; } /* Import from Copilot Studio panel */ .copilot-import-panel { margin-top: 0.75rem; border-top: 1px solid rgba(255,255,255,0.07); } .copilot-import-summary { padding: 0.45rem 0.1rem; font-size: 0.7rem; font-weight: 600; color: var(--cyan); cursor: pointer; user-select: none; list-style: none; } .copilot-import-summary::-webkit-details-marker { display: none; } .copilot-import-body { padding: 0.5rem 0 0.25rem; display: flex; flex-direction: column; gap: 0.55rem; } .copilot-import-hint { font-size: 0.67rem; color: var(--text-dim); margin: 0; line-height: 1.45; } .copilot-import-drop { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 0.5rem; border-radius: 7px; cursor: pointer; border: 1.5px dashed rgba(0,210,255,0.28); background: rgba(0,210,255,0.04); font-size: 0.72rem; color: var(--text-muted); transition: background 0.15s, border-color 0.15s; text-align: center; } .copilot-import-drop.copilot-drop-over, .copilot-import-drop:focus-visible { border-color: rgba(0,210,255,0.6); background: rgba(0,210,255,0.10); outline: none; } .copilot-import-drop.copilot-drop-loading { opacity: 0.6; pointer-events: none; } .copilot-drop-icon { font-size: 1rem; } .copilot-drop-browse { color: var(--cyan); cursor: pointer; text-decoration: underline; } .copilot-import-status { font-size: 0.68rem; line-height: 1.45; } .copilot-import-ok { color: #3ddc97; } .copilot-import-err { color: #ff6b6b; } .copilot-import-working { color: var(--text-dim); } ```
assets/css/demo.css MCP connector download button in connection card rows */ .mcp-conn-download { margin-left: auto; padding: 0.18rem 0.55rem; font-size: 0.65rem; font-weight: 600; white-space: nowrap; border-radius: 4px; text-decoration: none; background: rgba(0,210,255,0.08); border: 1px solid rgba(0,210,255,0.25); color: var(--cyan); transition: background 0.15s, border-color 0.15s; } .mcp-conn-download:hover { background: rgba(0,210,255,0.18); border-color: rgba(0,210,255,0.5); } /* "Copilot Studio ↓" highlight in registry export rows */ .creator-export-link-copilot { background: rgba(0,210,255,0.10) !important; border-color: rgba(0,210,255,0.35) !important; color: var(--cyan) !important; } .creator-export-link-copilot:hover { background: rgba(0,210,255,0.22) !important; } /* Import from Copilot Studio panel */ .copilot-import-panel { margin-top: 0.75rem; border-top: 1px solid rgba(255,255,255,0.07); } .copilot-import-summary { padding: 0.45rem 0.1rem; font-size: 0.7rem; font-weight: 600; color: var(--cyan); cursor: pointer; user-select: none; list-style: none; } .copilot-import-summary::-webkit-details-marker { display: none; } .copilot-import-body { padding: 0.5rem 0 0.25rem; display: flex; flex-direction: column; gap: 0.55rem; } .copilot-import-hint { font-size: 0.67rem; color: var(--text-dim); margin: 0; line-height: 1.45; } .copilot-import-drop { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 0.5rem; border-radius: 7px; cursor: pointer; border: 1.5px dashed rgba(0,210,255,0.28); background: rgba(0,210,255,0.04); font-size: 0.72rem; color: var(--text-muted); transition: background 0.15s, border-color 0.15s; text-align: center; } .copilot-import-drop.copilot-drop-over, .copilot-import-drop:focus-visible { border-color: rgba(0,210,255,0.6); background: rgba(0,210,255,0.10); outline: none; } .copilot-import-drop.copilot-drop-loading { opacity: 0.6; pointer-events: none; } .copilot-drop-icon { font-size: 1rem; } .copilot-drop-browse { color: var(--cyan); cursor: pointer; text-decoration: underline; } .copilot-import-status { font-size: 0.68rem; line-height: 1.45; } .copilot-import-ok { color: #3ddc97; } .copilot-import-err { color: #ff6b6b; } .copilot-import-working { color: var(--text-dim); } ```