agentgui 1.0.930 → 1.0.932

package/static/css/brand-bible.css

@@ -1,591 +0,0 @@
-:root {
-  /* Brand palette — mirrors design/colors_and_type.css exactly */
-  --paper:        #EFE9DD;
-  --ink:          #0B0B09;
-  --acid:         #B8FF00;
-  --link:         #1F4DFF;
-  --warn:         #FF3B1F;
-  --live:         #00A86B;
-
-  --green:        #247420;
-  --green-2:      #92CEAC;
-  --green-deep:   #1c5a19;
-  --green-fg:     #FFFFFF;
-  --purple:       #420247;
-  --purple-fg:    #FFFFFF;
-  --mascot:       #E84B8A;
-  --mascot-fg:    #FFFFFF;
-  --sun:          #FFD100;
-  --flame:        #FF5C1A;
-  --sky:          #3B82F6;
-
-  /* Panel surface tokens — light */
-  --panel-0:       var(--paper);
-  --panel-1:       #f6f1e7;
-  --panel-2:       #ece5d8;
-  --panel-3:       #ddd4c3;
-  --panel-hover:   #e6dece;
-  --panel-select:  #d8eed6;
-  --panel-text:    var(--ink);
-  --panel-text-2:  #4a473f;
-  --panel-text-3:  #6d675b;
-  --panel-accent:    var(--green);
-  --panel-accent-2:  var(--green-deep);
-  --panel-accent-fg: #ffffff;
-  --panel-shadow:  none;
-  --panel-shadow-top: none;
-
-  /* Semantic color aliases */
-  --color-primary: var(--green);
-  --color-primary-dark: var(--green-deep);
-  --color-bg-primary: var(--panel-0);
-  --color-bg-secondary: var(--panel-1);
-  --color-bg-raised: var(--panel-1);
-  --color-bg-hover: var(--panel-hover);
-  --color-bg-code: #f3eddf;
-  --color-code-text: var(--ink);
-  --color-code-border: var(--ink);
-  --color-thinking-bg: #efe7d5;
-  --color-text-primary: var(--panel-text);
-  --color-text-secondary: var(--panel-text-2);
-  --color-text-muted: var(--panel-text-3);
-  --color-border: var(--ink);
-  --color-success: var(--green);
-  --color-error: var(--warn);
-  --color-warning: #b36f00;
-  --color-info: var(--link);
-  --color-focus-ring: rgba(36, 116, 32, 0.2);
-
-  /* Mono color tokens */
-  --mono-1: var(--green);
-  --mono-2: var(--purple);
-  --mono-3: var(--mascot);
-  --mono-4: var(--sun);
-  --mono-5: var(--warn);
-  --mono-6: var(--sky);
-
-  /* Foreground tokens */
-  --fg:   var(--ink);
-  --fg-3: var(--panel-text-3);
-  --bg:   var(--paper);
-  --bg-2: var(--panel-2);
-
-  /* Typography */
-  --ff-display: "Archivo Black", "Arial Black", "Times New Roman", serif;
-  --ff-mono:    "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
-  --ff-body:    "Instrument Serif", Georgia, serif;
-  --ff-prose:   "Instrument Serif", Georgia, serif;
-
-  /* Font sizes */
-  --fs-micro:  9px;
-  --fs-xs:     11px;
-  --fs-tiny:   11px;
-  --fs-sm:     12px;
-  --fs-body:   13px;
-  --fs-lg:     14px;
-  --fs-h3:     14px;
-  --fs-h4:     13px;
-  --fs-h2:     28px;
-  --fs-h1:     48px;
-  --fs-hero:   96px;
-
-  /* Line heights */
-  --lh-tight:  1.05;
-  --lh-snug:   1.2;
-  --lh-base:   1.5;
-  --lh-long:   1.6;
-
-  /* Letter spacing */
-  --tr-tight:  -0.02em;
-  --tr-label:  0.08em;
-  --tr-caps:   0.05em;
-
-  /* Spacing scale (4px base) */
-  --space-1:  4px;
-  --space-2:  8px;
-  --space-3:  12px;
-  --space-4:  16px;
-  --space-5:  24px;
-  --space-6:  32px;
-  --space-7:  48px;
-  --space-8:  64px;
-
-  /* Border radius — flat by default */
-  --r-1:    0;
-  --r-2:    0;
-  --r-3:    0;
-  --r-pill: 9999px;
-  --radius-sm: 0;
-  --radius-md: 0;
-  --radius-lg: 0;
-  --radius-xl: 0;
-
-  /* Border widths */
-  --bw-hair: 1px;
-  --bw-rule: 2px;
-
-  /* Measure */
-  --measure: 72ch;
-
-  /* Motion */
-  --dur-snap:  80ms;
-  --dur-base:  160ms;
-  --ease:      cubic-bezier(0.2, 0, 0, 1);
-
-  /* Surface overlays */
-  --surface-2:     rgba(0,0,0,0.04);
-  --surface-ink-2: rgba(255,255,255,0.06);
-
-  --shadow-sm: none;
-  --shadow-md: none;
-  --shadow-lg: none;
-}
-
-html.dark,
-[data-theme="dark"] {
-  --panel-0:       #0B0B09;
-  --panel-1:       #141411;
-  --panel-2:       #1f1f1a;
-  --panel-3:       #2a2a23;
-  --panel-hover:   #24241f;
-  --panel-select:  #1f3520;
-  --panel-text:    #EFE9DD;
-  --panel-text-2:  #d2cab9;
-  --panel-text-3:  #afa797;
-  --panel-accent:    var(--green-2);
-  --panel-accent-2:  var(--green-2);
-  --panel-accent-fg: var(--ink);
-  --panel-shadow:  none;
-
-  --mono-1: var(--green-2);
-  --mono-2: #c084fc;
-  --mono-3: var(--mascot);
-  --mono-4: var(--sun);
-  --mono-5: var(--warn);
-  --mono-6: var(--sky);
-
-  --fg:   var(--panel-text);
-  --fg-3: var(--panel-text-3);
-  --bg:   var(--panel-0);
-  --bg-2: var(--panel-2);
-
-  --color-primary: var(--green-2);
-  --color-primary-dark: #7ebe9a;
-  --color-bg-primary: var(--panel-0);
-  --color-bg-secondary: var(--panel-1);
-  --color-bg-raised: var(--panel-1);
-  --color-bg-hover: var(--panel-hover);
-  --color-bg-code: #1d1d18;
-  --color-code-text: var(--panel-text);
-  --color-code-border: var(--panel-text);
-  --color-thinking-bg: #1a1f18;
-  --color-text-primary: var(--panel-text);
-  --color-text-secondary: var(--panel-text-2);
-  --color-text-muted: var(--panel-text-3);
-  --color-border: var(--panel-text);
-  --color-focus-ring: rgba(146, 206, 172, 0.25);
-}
-
-html,
-body {
-  background: var(--color-bg-primary);
-  color: var(--color-text-primary);
-  font-family: var(--ff-mono);
-  letter-spacing: 0;
-}
-
-* {
-  border-radius: 0 !important;
-  box-shadow: none !important;
-}
-
-.sidebar,
-.main-header,
-.view-toggle-bar,
-.input-section,
-.sidebar-search-bar,
-.clone-input-bar,
-.bulk-action-bar,
-.pm2-monitor-panel,
-.tools-popup-content,
-.folder-modal,
-.status-badge,
-.input-card,
-.cli,
-.panel,
-.kv {
-  border: 1px solid var(--color-border) !important;
-}
-
-.sidebar {
-  background: var(--panel-1);
-}
-
-.sidebar-header h2,
-.header-title {
-  font-family: var(--ff-display);
-  text-transform: lowercase;
-  letter-spacing: -0.02em;
-}
-
-.sidebar-header h2,
-.header-title {
-  font-size: 1rem;
-}
-
-.main-header,
-.view-toggle-bar,
-.sidebar-search-bar,
-.input-section {
-  background: var(--panel-0);
-}
-
-.sidebar-new-btn,
-.clone-go-btn,
-.input-send-btn,
-.btn-primary,
-.view-toggle-btn.active,
-.status-indicator[data-status="connected"],
-.streaming-block-system,
-.message-tool,
-.conversation-item.active {
-  background: var(--panel-accent) !important;
-  color: var(--panel-accent-fg) !important;
-}
-
-.sidebar-overflow-btn,
-.sidebar-toggle-btn,
-.theme-toggle-btn,
-.header-icon-btn,
-.input-icon-btn,
-.view-toggle-btn,
-.btn,
-.btn-ghost,
-.status-cancel-btn,
-.clone-cancel-btn,
-.tools-popup-refresh-btn {
-  background: transparent;
-  color: var(--color-text-secondary);
-  border: 1px solid var(--color-border) !important;
-}
-
-.sidebar-overflow-btn:hover,
-.sidebar-toggle-btn:hover,
-.theme-toggle-btn:hover,
-.header-icon-btn:hover,
-.input-icon-btn:hover,
-.view-toggle-btn:hover,
-.btn:hover,
-.btn-ghost:hover,
-.status-cancel-btn:hover,
-.clone-cancel-btn:hover,
-.tools-popup-refresh-btn:hover {
-  background: var(--panel-hover) !important;
-  color: var(--color-text-primary) !important;
-}
-
-.welcome-logo {
-  background: var(--purple);
-  color: #fff;
-  border: 1px solid var(--color-border);
-  font-family: var(--ff-display);
-}
-
-.welcome-subtitle {
-  font-family: var(--ff-mono);
-  text-transform: lowercase;
-  color: var(--color-text-secondary);
-}
-
-.message {
-  border: 1px solid var(--color-border);
-  background: var(--panel-1);
-}
-
-.message-user {
-  background: #dcefd9;
-}
-
-html.dark .message-user {
-  background: #1f3520;
-}
-
-.message-role,
-.conversation-item-meta,
-.status-badge,
-.sidebar-empty,
-.sidebar-search-input,
-.input-chip-select,
-.input-card-textarea,
-.sidebar-list,
-.streaming-status-bar,
-.kv td:first-child {
-  font-family: var(--ff-mono);
-}
-
-.message-content,
-.message-text,
-.welcome-subtitle,
-.main-panel p {
-  font-family: var(--ff-body);
-  font-size: 0.98rem;
-}
-
-a,
-.prose a,
-.message-content a {
-  color: var(--link);
-  text-decoration: underline;
-  text-underline-offset: 2px;
-}
-
-a:hover,
-.prose a:hover,
-.message-content a:hover {
-  color: var(--panel-accent);
-}
-
-.input-card,
-.sidebar-search-input,
-.clone-input,
-.input-chip-select,
-.input-card-textarea,
-.tools-popup-content,
-.folder-modal,
-.message-code,
-pre,
-code {
-  background: var(--color-bg-secondary) !important;
-  color: var(--color-text-primary);
-}
-
-.message-code,
-pre,
-code {
-  border: 1px solid var(--color-border);
-}
-
-.status-badge,
-.app-shell,
-.main-panel,
-#output-scroll,
-.messages-wrapper,
-.sidebar-list,
-.conversation-item,
-.streaming-status-bar,
-.input-card-toolbar,
-.card,
-.panel-body {
-  border-color: var(--color-border) !important;
-}
-
-.streaming-status-bar {
-  background: var(--panel-1);
-}
-
-.status-agent-name {
-  color: var(--panel-accent);
-  font-weight: 700;
-}
-
-.tools-popup,
-.folder-modal-overlay {
-  background: rgba(11, 11, 9, 0.5) !important;
-}
-
-.drop-zone-overlay {
-  background: rgba(36, 116, 32, 0.12);
-  border: 1px dashed var(--color-border);
-}
-
-::-webkit-scrollbar-thumb {
-  background: var(--panel-3);
-}
-
-@media (max-width: 768px) {
-  .sidebar {
-    border-right: 1px solid var(--color-border) !important;
-  }
-}
-
-/* Selection — mascot brand color */
-::selection { background: var(--mascot); color: var(--mascot-fg); }
-
-/* Mono color utilities — colorful mono, the 247420 signature */
-.mono-green   { color: var(--mono-1); }
-.mono-purple  { color: var(--mono-2); }
-.mono-mascot  { color: var(--mono-3); }
-.mono-sun     { color: var(--mono-4); }
-.mono-flame   { color: var(--mono-5); }
-.mono-sky     { color: var(--mono-6); }
-.mono-ink     { color: var(--fg); }
-.mono-dim     { color: var(--fg-3); }
-
-/* Highlight blocks — mono run on tinted bg */
-.hl-green   { background: var(--green);   color: var(--green-fg);   padding: 0.08em 0.4em; }
-.hl-purple  { background: var(--purple);  color: var(--purple-fg);  padding: 0.08em 0.4em; }
-.hl-mascot  { background: var(--mascot);  color: var(--mascot-fg);  padding: 0.08em 0.4em; }
-.hl-sun     { background: var(--sun);     color: var(--ink);        padding: 0.08em 0.4em; }
-
-/* Syntax role classes */
-.m-k  { color: var(--mono-2); font-weight: 500; }
-.m-s  { color: var(--mono-4); }
-.m-n  { color: var(--mono-1); }
-.m-c  { color: var(--fg-3); font-style: italic; }
-.m-tag{ color: var(--mono-3); }
-.m-op { color: var(--mono-5); }
-.m-ref{ color: var(--mono-6); text-decoration: underline; text-underline-offset: 3px; }
-
-/* Row hover — translate + shadow like design system */
-.conversation-item:hover {
-  transform: translateX(-1px);
-}
-
-/* Focus ring — green glow */
-:focus-visible {
-  outline: 2px solid var(--panel-accent) !important;
-  outline-offset: 2px;
-}
-
-/* Chip selects — use panel-3 so they contrast against the panel-1 card bg */
-.input-chip-select {
-  background: var(--panel-3) !important;
-  border: 1px solid var(--color-border) !important;
-  color: var(--color-text-primary) !important;
-  border-radius: var(--r-pill) !important;
-}
-.input-chip-select:hover {
-  border-color: var(--panel-accent) !important;
-  background: var(--panel-select) !important;
-}
-
-/* Viewport-safe dropdown menu — max-height prevents off-screen overflow; JS flips top/bottom */
-.sidebar-overflow-menu {
-  max-height: calc(100dvh - 80px);
-  overflow-y: auto;
-}
-
-/* ============================================================
-   Brand line — 247420 / project / leaf
-   ============================================================ */
-.brand-line {
-  font-family: var(--ff-mono) !important;
-  font-weight: 600 !important;
-  font-size: 14px !important;
-  letter-spacing: 0 !important;
-  color: var(--panel-text) !important;
-  text-transform: lowercase;
-  margin: 0 !important;
-  display: inline-flex;
-  align-items: center;
-}
-.brand-line .slash {
-  color: var(--panel-text-3);
-  font-weight: 400;
-  margin: 0 2px;
-}
-.brand-line .leaf {
-  color: var(--panel-accent);
-  font-weight: 500;
-}
-
-/* Main header — flatten to app-topbar style */
-.main-header {
-  background: var(--panel-2) !important;
-  height: 40px !important;
-  min-height: 40px !important;
-  padding: 0 16px !important;
-  gap: 12px !important;
-  box-shadow: none !important;
-}
-.main-header .header-title {
-  font-family: var(--ff-mono) !important;
-  font-size: 14px !important;
-  font-weight: 600 !important;
-  text-transform: lowercase;
-}
-
-/* Sidebar header */
-.sidebar-header {
-  background: var(--panel-2) !important;
-  height: 40px !important;
-  min-height: 40px !important;
-  padding: 0 12px !important;
-}
-.sidebar-header h2.brand-line {
-  font-size: 13px !important;
-}
-.sidebar-header .btn-stamp {
-  padding: 4px 10px !important;
-  font-size: 11px !important;
-  height: 26px !important;
-  line-height: 1 !important;
-  box-shadow: 2px 2px 0 var(--ink) !important;
-}
-.sidebar-header .btn-stamp:hover {
-  box-shadow: 1px 1px 0 var(--ink) !important;
-  transform: translate(1px,1px);
-}
-
-/* Welcome pane — app-main narrow style */
-.welcome-pane {
-  max-width: 720px;
-  margin: 0 auto;
-  padding: 48px 32px;
-  display: flex;
-  flex-direction: column;
-  gap: 32px;
-}
-.welcome-head { display: flex; flex-direction: column; gap: 8px; }
-.welcome-title {
-  font-family: var(--ff-display);
-  font-size: 36px;
-  font-weight: 800;
-  letter-spacing: -0.01em;
-  line-height: 1.1;
-  margin: 0;
-  color: var(--panel-text);
-  text-transform: lowercase;
-}
-.welcome-lede {
-  font-size: 14px;
-  line-height: 1.6;
-  color: var(--panel-text-2);
-  margin: 0;
-  max-width: 60ch;
-}
-.welcome-select-row {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  max-width: 280px;
-}
-.welcome-rows {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-.welcome-rows .row {
-  grid-template-columns: 40px 180px 1fr;
-  padding: 12px 16px;
-  background: var(--panel-1);
-  border-radius: 0;
-}
-.welcome-rows .row .row-code {
-  color: var(--panel-accent);
-  font-weight: 600;
-}
-.welcome-rows .row .row-title {
-  font-family: var(--ff-mono);
-  font-weight: 600;
-  font-size: 13px;
-  letter-spacing: 0;
-  color: var(--panel-text);
-  text-transform: lowercase;
-}
-.welcome-rows .row .row-meta {
-  color: var(--panel-text-2);
-  text-transform: none;
-  letter-spacing: 0;
-  font-size: 12px;
-}