/* You can add global styles to this file, and also import other style files */ @import '@fontsource/material-icons-outlined'; @import '@angular/material/prebuilt-themes/azure-blue.css'; @import 'tailwindcss'; @theme { /* ──────────────────────────────────────────────────────────────── * Design Tokens * ──────────────────────────────────────────────────────────────── * Primary palette: blue scale (Tailwind Blue) * 50–950 shades used for buttons, links, focus rings, and accents. * 600 = default action colour | 700 = hover | 300 = focus ring (dark) * * Fonts: Inter as the single sans-serif family for body & headings. * * Dark mode: toggled via .dark class on or . * ──────────────────────────────────────────────────────────────── */ /* Dark mode */ --dark-mode-selector: .dark; /* Primary colour scale (blue) — used by .button, .link, focus rings */ --color-primary-50: #eff6ff; --color-primary-100: #dbeafe; --color-primary-200: #bfdbfe; --color-primary-300: #93c5fd; --color-primary-400: #60a5fa; --color-primary-500: #3b82f6; --color-primary-600: #2563eb; /* default action */ --color-primary-700: #1d4ed8; /* hover */ --color-primary-800: #1e40af; --color-primary-900: #1e3a8a; --color-primary-950: #172554; /* Font families — single stack for body & UI */ --font-body: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; } /* ── Design tokens (dialogs & modals) ───────────────────────────── * Shared across modal-shell and (progressively) the other dialog * components, so a single value change stays consistent everywhere * instead of being copied per-component. * ─────────────────────────────────────────────────────────────── */ :root { --radius-modal: 1rem; --shadow-modal: 0 25px 50px rgb(15 23 42 / 25%); --color-surface: #ffffff; --color-border: #cbd5e1; --color-divider: #e2e8f0; --color-text-body: #0f172a; --color-text-muted: #64748b; --color-accent: #2563eb; --color-danger: #dc2626; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --z-modal-backdrop: 10020; --z-modal: 10021; --z-confirm: 10031; } /* ── Semantic surface colours (hard-coded) ────────────────────── * #0f172a slate-900 — body text, modal text * #1e293b slate-800 — param text * #475569 slate-600 — labels, ghost button text * #64748b slate-500 — param keys, muted text * #cbd5e1 slate-300 — borders, toggle track * #dbe2ea — card borders (custom) * #dbe7f5 — array block border (custom) * #2563eb blue-600 — primary action (buttons, toggles) * #1d4ed8 blue-700 — param view hover * #1e40af blue-800 — subflow label * #dc2626 red-600 — error alert bg * #b91c1c red-700 — array remove button * #eab308 yellow-500 — warning alert bg * ─────────────────────────────────────────────────────────────── */ body { @apply bg-gray-50 dark:bg-gray-900; color: #0f172a; font-family: var(--font-body); } body.node-focus-modal-open { overflow: hidden; } /* ── Global Material overrides ────────────────────────────────── */ /* Default form fields to full width — uses :where() for zero specificity so any component-level rule can override without !important. */ :where(.mat-mdc-form-field) { width: 100%; } .mat-mdc-dialog-surface, .mat-mdc-card { border-radius: 16px; } .material-icons, .material-icons-outlined { font-family: 'Material Icons Outlined' !important; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: 'liga'; } /* ── Utility classes ──────────────────────────────────────────── */ .container-centered { @apply flex flex-col items-center justify-center px-6 py-8 mx-auto md:h-screen lg:py-0; } .input { @apply bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-primary-600 focus:border-primary-600 block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500; } .card-container { @apply w-full bg-white rounded-lg shadow dark:border md:mt-0 sm:max-w-md xl:p-0 dark:bg-gray-800 dark:border-gray-700; } .card { @apply p-6 space-y-4 md:space-y-6 sm:p-8; } .label { @apply block mb-2 text-sm font-medium text-gray-900 dark:text-white; } .title { @apply text-xl font-bold leading-tight tracking-tight text-gray-900 md:text-2xl dark:text-white; } .button { @apply text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800; } .button:disabled { @apply bg-primary-500 opacity-40; } /* ── LLM / Node shared styles (used by generic-node, container-node, task-step-node) ── */ .llm-modal-backdrop { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; margin: 0; padding: 12px; border: none; background: transparent; color: inherit; } .llm-modal-backdrop::backdrop { background: rgba(15, 23, 42, 0.45); } .llm-modal { width: min(360px, calc(100vw - 24px)); display: flex; flex-direction: column; gap: 10px; border: 1px solid #dbe2ea; border-radius: 12px; background: #ffffff; box-shadow: 0 16px 40px rgba(15, 23, 42, 0.25); padding: 14px; } .llm-modal-title { font-size: 13px; font-weight: 700; color: #0f172a; } .llm-modal-field { display: flex; flex-direction: column; gap: 4px; } .llm-modal-field label { font-size: 11px; font-weight: 600; color: #475569; } .llm-modal-field input, .llm-modal-field select, .llm-modal-field textarea { border: 1px solid #cbd5e1; border-radius: 8px; font-size: 12px; color: #0f172a; padding: 7px 8px; resize: vertical; } .llm-modal-actions { display: flex; justify-content: flex-end; gap: 8px; } .llm-btn { border: 1px solid transparent; border-radius: 8px; cursor: pointer; font-size: 12px; font-weight: 600; padding: 6px 10px; } .llm-btn-ghost { border-color: #cbd5e1; color: #475569; background: #ffffff; } .llm-btn-primary { background: #2563eb; color: #ffffff; } .node-toggle { width: fit-content; display: inline-flex; align-items: center; gap: 10px; border: 1px solid #cbd5e1; border-radius: 999px; background: #fff; color: #0f172a; cursor: pointer; padding: 6px 10px; } .node-toggle-track { position: relative; width: 34px; height: 20px; border-radius: 999px; background: #cbd5e1; transition: background-color 0.2s ease; } .node-toggle-thumb { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.2); transition: transform 0.2s ease; } .node-toggle-label { font-size: 12px; font-weight: 600; text-transform: lowercase; } .node-toggle-on .node-toggle-track { background: #2563eb; } .node-toggle-on .node-toggle-thumb { transform: translateX(14px); } .llm-error-alert-wrap, .llm-warning-alert-wrap { position: absolute; top: -12px; z-index: 120; } .llm-error-alert, .llm-warning-alert { width: 26px; height: 26px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; } .llm-error-alert { border: 1px solid #fecaca; background: #dc2626; color: #fff7ed; box-shadow: 0 0 0 3px rgba(127, 29, 29, 0.2); } .llm-warning-alert { border: 1px solid #fde68a; background: #eab308; color: #422006; box-shadow: 0 0 0 3px rgba(202, 138, 4, 0.22); } .llm-error-tooltip, .llm-warning-list-tooltip { position: absolute; top: calc(100% + 8px); min-width: 220px; max-width: 320px; border-radius: 8px; box-shadow: 0 10px 24px rgba(15, 23, 42, 0.2); padding: 8px; z-index: 130; opacity: 0; visibility: hidden; transform: translateY(-2px); transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease; } .llm-error-tooltip { right: 0; border: 1px solid #fecaca; background: #fff1f2; color: #7f1d1d; } .llm-warning-list-tooltip { left: 0; border: 1px solid #fde68a; background: #fef9c3; color: #713f12; } .llm-error-alert-wrap:hover .llm-error-tooltip, .llm-warning-alert-wrap:hover .llm-warning-list-tooltip { opacity: 1; visibility: visible; transform: translateY(0); } .llm-error-title, .llm-warning-list-title { font-size: 11px; font-weight: 700; margin-bottom: 4px; } .llm-error-item, .llm-warning-list-item { font-size: 11px; line-height: 1.3; } .llm-param-block { border: 1px solid #dbe2ea; border-radius: 8px; background: #ffffff; padding: 8px; } .llm-param-text { margin-top: 4px; color: #1e293b; font-size: 11px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; } .llm-param-value-clamped, .llm-param-text-clamped { display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .llm-param-value-clamped { white-space: pre-wrap; word-break: break-word; } .llm-inline-token { display: inline-flex; align-items: center; min-height: 18px; margin: 0 2px; border: 1px solid #bbf7d0; border-radius: 6px; background: #ecfdf3; color: #166534; font-size: 10px; font-weight: 600; padding: 0 6px; } .llm-param-key { color: #64748b; font-size: 10px; letter-spacing: 0.03em; text-transform: uppercase; } .llm-param-value { color: #0f172a; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .llm-array-sections { display: flex; flex-direction: column; gap: 10px; } .llm-array-block { display: flex; flex-direction: column; gap: 8px; border: 1px solid #dbe7f5; border-radius: 12px; background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%); padding: 10px 12px; } .llm-array-empty { color: #64748b; font-size: 12px; } .llm-array-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid rgba(191, 219, 254, 0.9); border-radius: 10px; background: rgba(239, 246, 255, 0.9); padding: 8px 10px; } .llm-array-item-summary { min-width: 0; color: #0f172a; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .llm-array-item-actions { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; } .llm-array-remove-btn { color: #b91c1c; } .llm-param-view-btn { flex: 0 0 auto; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #bfdbfe; border-radius: 999px; background: #eff6ff; color: #1d4ed8; cursor: pointer; padding: 0; } .llm-param-view-btn:hover { background: #dbeafe; } .llm-param-view-btn i { font-size: 10px; } .llm-subflow-section { margin-top: 4px; } .llm-subflow-view { display: flex; width: 100%; align-items: center; justify-content: center; border: 1px solid #c7d2fe; border-radius: 12px; background: linear-gradient(180deg, #eef4ff 0%, #e0ecff 100%); color: #1e40af; cursor: pointer; font-size: 12px; font-weight: 700; line-height: 1; padding: 11px 12px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7); transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease; } .llm-subflow-view:hover { background: linear-gradient(180deg, #dbeafe 0%, #c7ddff 100%); border-color: #93c5fd; } .link { @apply font-medium text-primary-600 hover:underline dark:text-primary-500; } .link-active { @apply text-purple-600 dark:text-white; } .form-control { @apply flex flex-col gap-0.5; } .form-group { @apply flex flex-col gap-4; } .helper-text { @apply text-sm font-light text-gray-500 dark:text-gray-400; } .nav-header { @apply bg-white border-gray-200 px-4 lg:px-6 py-2.5 dark:bg-gray-800; } .inner-nav { @apply flex flex-wrap justify-center gap-4 items-center max-w-7xl; }