Home Explore Help
Register Sign In
liugang
/
ai-agent
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Branch: master
Branches Tags
ai-agent
/
MemoryAgents
/
frontend
/
app
/
globals.css

globals.css 10 KB
Permalink History Raw

12345678910111213141516171819 
  1. @import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');
    2. 

  2. 

  3. :root { --bg: #f4f6f8; --panel: #fff; --ink: #18212b; --muted: #71808d; --line: #e1e7ec; --blue: #2a73e9; --blue-soft: #edf4ff; --green: #27a574; --amber: #bd771a; --red: #c86666; --shadow: 0 18px 46px rgba(34, 51, 70, .06); }
    4. 

  4. * { box-sizing: border-box; }
    5. 

  5. body { margin: 0; background: var(--bg); color: var(--ink); font-family: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
    6. 

  6. button, textarea { font: inherit; }
    7. 

  7. button { cursor: pointer; }
    8. 

  8. .app-shell { max-width: 1540px; margin: 0 auto; padding: 0 34px 22px; }
    9. 

  9. .topbar { height: 76px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
    10. 

  10. .brand, .top-actions, .chat-system-title, .status-label, .workspace-pill, .reset-button, .storage-badge, .inspector-tabs span, footer { display: flex; align-items: center; }
    11. 

  11. .brand { gap: 12px; }.brand-mark { width: 36px; height: 36px; display: grid; place-items: center; color: #fff; background: #1d2b3a; border-radius: 10px; }.brand-title { font-weight: 800; letter-spacing: -.02em; }.brand-subtitle { font: 11px "DM Mono", monospace; color: var(--muted); margin-top: 2px; }.top-actions { gap: 12px; }.workspace-pill { gap: 7px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 99px; background: rgba(255,255,255,.7); font: 11px "DM Mono", monospace; color: var(--muted); }.icon-button { border: 0; background: transparent; color: var(--muted); padding: 7px; }.hero { display: flex; justify-content: space-between; gap: 30px; padding: 42px 0 34px; }.eyebrow, .section-kicker { margin: 0; font: 10px "DM Mono", monospace; color: var(--blue); letter-spacing: .12em; }.hero h1 { margin: 10px 0 12px; font-size: clamp(28px, 3.3vw, 45px); line-height: 1.1; letter-spacing: -.055em; }.hero h1 span { color: var(--blue); }.hero-copy { color: var(--muted); font-size: 14px; margin: 0; max-width: 620px; line-height: 1.7; }.hero-status { min-width: 245px; align-self: flex-end; padding: 15px 17px; background: #eaf7f1; border: 1px solid #ccebdd; border-radius: 12px; }.status-label { gap: 7px; color: var(--green); font: 10px "DM Mono", monospace; }.pulse { width: 7px; height: 7px; border-radius: 99px; background: var(--green); box-shadow: 0 0 0 4px rgba(39,165,116,.12); }.hero-status strong { display: block; font-size: 12px; margin: 8px 0 3px; overflow-wrap: anywhere; }.hero-status small { color: #67917f; font-size: 10px; }.workspace-grid { display: grid; grid-template-columns: 246px minmax(420px, 1fr) 300px; gap: 15px; align-items: stretch; }.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 15px; box-shadow: var(--shadow); }.system-rail, .inspector { min-height: 670px; }.panel-heading, .chat-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 18px; border-bottom: 1px solid var(--line); }.panel h2 { margin: 4px 0 0; font-size: 16px; letter-spacing: -.03em; }.muted { color: #a2adb6; }.system-list { padding: 10px; }.system-card { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 9px; margin-bottom: 4px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--ink); text-align: left; }.system-card:hover { background: #f7f9fb; }.system-card.selected { background: var(--blue-soft); border-color: #d8e7ff; }.system-icon { width: 31px; height: 31px; display: grid; place-items: center; flex: 0 0 auto; color: #667585; background: #f0f3f5; border-radius: 9px; }.selected .system-icon { color: var(--blue); background: #fff; }.system-copy { min-width: 0; flex: 1; }.system-copy strong { display: block; font-size: 12px; }.system-copy span { display: block; color: var(--muted); font-size: 10px; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.availability { width: 6px; height: 6px; border-radius: 50%; background: var(--red); }.availability.on { background: var(--green); }.selected-arrow { color: var(--blue); }.rail-note { display: flex; gap: 9px; margin: auto 14px 14px; padding: 12px; color: var(--muted); background: #f7f9fb; border-radius: 9px; font-size: 10px; line-height: 1.55; }.chat-panel { display: flex; min-height: 670px; flex-direction: column; overflow: hidden; }.chat-header { padding: 15px 18px; }.chat-system-title { gap: 10px; }.system-icon.large { width: 37px; height: 37px; color: var(--blue); }.chat-header h2 { display: flex; align-items: center; gap: 8px; }.mode-chip { padding: 3px 6px; border-radius: 4px; background: #eef1f3; color: var(--muted); font: 9px "DM Mono", monospace; letter-spacing: 0; }.reset-button { gap: 6px; border: 0; background: transparent; color: var(--muted); font-size: 10px; }.reset-button:hover { color: var(--red); }.agent-description { padding: 11px 18px; border-bottom: 1px solid #edf0f2; color: var(--muted); font-size: 11px; line-height: 1.55; }.separator { color: #ccd4da; margin: 0 5px; }.messages { flex: 1; min-height: 330px; max-height: 480px; overflow-y: auto; padding: 21px 18px 6px; }.message-row { display: flex; gap: 10px; margin-bottom: 19px; }.message-row.user { flex-direction: row-reverse; }.message-avatar { width: 25px; height: 25px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 8px; background: #1f3041; color: #fff; font: 10px "DM Mono", monospace; }.user .message-avatar { background: var(--blue); }.system .message-avatar { background: var(--amber); }.message-bubble { max-width: 85%; }.user .message-bubble { text-align: right; }.message-role { color: #a4afb8; font: 9px "DM Mono", monospace; letter-spacing: .08em; margin-bottom: 4px; }.message-mode { margin-left: 8px; color: var(--green); }.message-content { white-space: pre-wrap; font-size: 12px; line-height: 1.65; }.system .message-content { color: var(--amber); }.event-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px; }.event-tags span { padding: 3px 6px; border-radius: 4px; color: var(--blue); background: var(--blue-soft); font: 9px "DM Mono", monospace; }.composer { display: flex; gap: 10px; padding: 14px; border-top: 1px solid var(--line); background: #fbfcfd; }.composer textarea { flex: 1; resize: none; border: 1px solid var(--line); border-radius: 9px; padding: 10px 11px; outline: 0; color: var(--ink); background: #fff; font-size: 12px; line-height: 1.5; }.composer textarea:focus { border-color: #9bc0fa; box-shadow: 0 0 0 3px rgba(42,115,233,.08); }.send-button { align-self: stretch; display: flex; align-items: center; gap: 7px; padding: 0 15px; border: 0; border-radius: 9px; background: var(--blue); color: #fff; font-size: 11px; }.send-button:disabled { opacity: .45; cursor: not-allowed; }.spin { animation: spin 1s linear infinite; }.inspector-tabs { display: flex; border-bottom: 1px solid var(--line); }.inspector-tabs span { flex: 1; justify-content: center; gap: 6px; padding: 17px 8px 13px; color: var(--muted); font-size: 11px; }.inspector-tabs span.active { color: var(--blue); border-bottom: 2px solid var(--blue); }.inspector-content { padding: 16px; }.inspector-summary { display: flex; justify-content: space-between; align-items: end; }.inspector-summary h2 { font-size: 27px; margin-top: 3px; }.inspector-summary h2 small { color: var(--muted); font-size: 10px; font-weight: 500; }.storage-badge { gap: 5px; padding: 4px 7px; color: var(--green); background: #eaf7f1; border-radius: 5px; font: 9px "DM Mono", monospace; }.empty-state { display: flex; align-items: center; flex-direction: column; gap: 8px; padding: 55px 12px 42px; text-align: center; color: #b0bbc3; }.empty-state strong { color: var(--muted); font-size: 12px; }.empty-state span { font-size: 10px; line-height: 1.5; }.memory-list { display: grid; gap: 8px; margin-top: 14px; max-height: 330px; overflow-y: auto; }.memory-item { padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: #fcfdfe; }.memory-meta, .audit-row, .subheading { display: flex; align-items: center; justify-content: space-between; }.memory-meta span { color: var(--blue); font: 9px "DM Mono", monospace; }.memory-meta time, .memory-source, .audit-row time { color: #a4afb8; font: 9px "DM Mono", monospace; }.memory-item p { margin: 7px 0; font-size: 11px; line-height: 1.5; }.memory-source { font-size: 9px; }.audit-preview { margin-top: 20px; padding-top: 15px; border-top: 1px solid var(--line); }.subheading { color: var(--muted); font-size: 10px; font-weight: 700; }.count-badge { padding: 2px 6px; border-radius: 99px; color: var(--blue); background: var(--blue-soft); font: 9px "DM Mono", monospace; }.audit-row { justify-content: flex-start; gap: 8px; padding: 8px 0; border-bottom: 1px solid #f0f2f4; color: var(--muted); font: 10px "DM Mono", monospace; }.audit-row time { margin-left: auto; }.audit-dot { width: 5px; height: 5px; border-radius: 99px; background: var(--green); }.audit-row:last-child { border-bottom: 0; }footer { gap: 7px; padding-top: 15px; color: #9ba7b0; font: 10px "DM Mono", monospace; }.footer-link { color: var(--blue); margin-left: auto; }@keyframes spin { to { transform: rotate(360deg); } }
    12. 

  12. @media (max-width: 1120px) { .workspace-grid { grid-template-columns: 210px minmax(390px, 1fr); }.inspector { grid-column: 1 / -1; min-height: auto; }.memory-list { grid-template-columns: repeat(2, 1fr); max-height: none; } }
    13. 

  13. @media (max-width: 760px) { .app-shell { padding: 0 14px 20px; }.hero { display: block; padding-top: 28px; }.hero-status { margin-top: 24px; }.workspace-grid { grid-template-columns: 1fr; }.system-rail, .inspector { min-height: auto; }.system-list { display: grid; grid-template-columns: repeat(2, 1fr); }.rail-note { margin-top: 10px; }.messages { min-height: 380px; }.memory-list { grid-template-columns: 1fr; }.topbar { height: 65px; }.brand-subtitle { display: none; }.workspace-pill { display: none; }footer { align-items: flex-start; }.footer-link { display: none; } }
    14. 

  14. 

  15. .memory-meta time { margin-left: auto; margin-right: 7px; }
    16. 

  16. .memory-delete-button { display: inline-flex; align-items: center; gap: 3px; border: 0; padding: 2px 4px; border-radius: 4px; color: var(--red); background: transparent; font-size: 9px; }
    17. 

  17. .memory-delete-button:hover { background: #fff0f0; }
    18. 

  18. .memory-delete-button:disabled { opacity: .45; cursor: wait; }
    19. 

  19. .reset-button:disabled { opacity: .45; cursor: wait; }
    20.