/* GENERATED FILE — do not edit. Source: platform/theme/dec-platform.css Regenerate with: scripts/sync-platform-theme.py (CI fails on drift). */ /* ========================================================================== DEC AI Platform — shared stylesheet (design tokens + common components) -------------------------------------------------------------------------- SOURCE OF TRUTH: platform/theme/dec-platform.css Every DEC-facing app ships its own vendored copy (hub, agent-console incl. the Desk Workspace, and the MCP server's portal) so each container image stays self-contained. Never edit a vendored copy — edit this file and run scripts/sync-platform-theme.py (CI fails on drift). Conventions - Tokens are --dec-* custom properties on :root (light = the platform look of ai.dgoc.com). `` swaps the palette; the component rules below work in both. - Shared components carry a `dec-` prefix (.dec-card, .dec-btn, .dec-pill, .dec-tile, .dec-table, .dec-notice, .dec-chip, .dec-dot, .dec-tabbar) with state modifiers `is-ok | is-warn | is-err | is-info | is-off | is-unknown`. App-specific layout stays in each app's own stylesheet, built on these tokens. ========================================================================== */ :root { /* typography */ --dec-font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif; --dec-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --dec-font-size: 15px; --dec-line-height: 1.5; /* palette — light (platform reference look) */ --dec-bg: #f4f6f8; --dec-surface: #ffffff; --dec-surface-2: #f0f3f6; --dec-ink: #1b2430; --dec-muted: #5f6b7a; --dec-line: #dde3ea; --dec-brand: #0d6e6e; --dec-brand-2: #128c8c; --dec-on-brand: #ffffff; --dec-link: #0d6e6e; /* status */ --dec-ok: #1f9d55; --dec-ok-soft: #e6f5ec; --dec-warn: #d98b00; --dec-warn-soft: #fff1cc; --dec-err: #c73a3a; --dec-err-soft: #fbe9e6; --dec-info: #128c8c; --dec-info-soft: #e3f2f2; --dec-neutral: #9aa5b1; --dec-neutral-soft: #eef1f4; /* code blocks stay dark-on-light in both themes for contrast */ --dec-code-bg: #0f1a26; --dec-code-ink: #e6edf3; --dec-code-inline-bg: #f0f3f6; /* shape */ --dec-brand-soft: #e3f2f2; --dec-radius: 8px; --dec-radius-lg: 14px; --dec-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .05); --dec-shadow-hover: 0 6px 18px rgba(16, 24, 40, .10); --dec-overlay: rgba(16, 24, 40, .45); --dec-focus: 0 0 0 3px rgba(18, 140, 140, .28); } /* Dark palette. Used by the agent console / Desk Workspace until those views adopt the light platform look; the values are the console's original palette so switching to tokens changes nothing visually. */ [data-theme="dark"] { --dec-bg: #0f1420; --dec-surface: #161d2e; --dec-surface-2: #1d2740; --dec-ink: #e6ecf8; --dec-muted: #8ea0c0; --dec-line: #2a3654; --dec-brand: #4f8cff; --dec-brand-2: #6ea3ff; --dec-on-brand: #ffffff; --dec-link: #4f8cff; --dec-ok: #2ecc8f; --dec-ok-soft: rgba(46, 204, 143, .12); --dec-warn: #f5a623; --dec-warn-soft: rgba(245, 166, 35, .12); --dec-err: #ff6b6b; --dec-err-soft: rgba(255, 107, 107, .15); --dec-info: #4f8cff; --dec-info-soft: rgba(79, 140, 255, .15); --dec-neutral: #8ea0c0; --dec-neutral-soft: rgba(142, 160, 192, .15); --dec-code-bg: rgba(0, 0, 0, .35); --dec-code-ink: #e6ecf8; --dec-code-inline-bg: rgba(0, 0, 0, .35); --dec-brand-soft: rgba(79, 140, 255, .15); --dec-shadow: 0 1px 2px rgba(0, 0, 0, .3); --dec-shadow-hover: 0 4px 14px rgba(0, 0, 0, .45); --dec-overlay: rgba(0, 0, 0, .55); --dec-focus: 0 0 0 3px rgba(79, 140, 255, .35); } /* ---------- base ---------- */ *, *::before, *::after { box-sizing: border-box; } /* The hidden attribute must always win over an author display rule. */ [hidden] { display: none !important; } body { margin: 0; font: var(--dec-font-size) / var(--dec-line-height) var(--dec-font); color: var(--dec-ink); background: var(--dec-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3 { letter-spacing: -.01em; } a { color: var(--dec-link); } :focus-visible { outline: 2px solid var(--dec-brand-2); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } } .dec-muted { color: var(--dec-muted); } /* 12px uppercase tracked label above a title or a group of values */ .dec-kicker { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--dec-muted); } .dec-title { margin: 0; font-size: 26px; font-weight: 650; } .dec-lead { margin: 6px 0 0; color: var(--dec-muted); font-size: 14.5px; } .dec-empty { text-align: center; color: var(--dec-muted); padding: 40px 16px; } .dec-mono { font-family: var(--dec-mono); } .dec-small { font-size: 13px; } /* ---------- top bar (brand header) ---------- */ .dec-topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 14px 28px; background: linear-gradient(90deg, var(--dec-brand), var(--dec-brand-2)); color: var(--dec-on-brand); box-shadow: 0 1px 0 rgba(0, 0, 0, .06), 0 2px 12px rgba(11, 60, 60, .12); } .dec-topbar h1 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: .2px; } .dec-topbar h1 a { color: inherit; text-decoration: none; } .dec-topbar .dec-sub { opacity: .85; font-size: 13px; } .dec-brand { display: flex; align-items: center; gap: 12px; } .dec-brand-mark { width: 14px; height: 14px; border-radius: 3px; flex: none; background: var(--dec-on-brand); opacity: .95; box-shadow: 0 0 0 3px rgba(255, 255, 255, .18); } .dec-who { display: flex; align-items: center; gap: 14px; font-size: 14px; } .dec-who form { margin: 0; } /* Quiet button on the brand bar (sign out etc.) */ .dec-link-btn { background: transparent; border: 1px solid rgba(255, 255, 255, .6); color: var(--dec-on-brand); border-radius: 6px; padding: 4px 10px; cursor: pointer; font: inherit; font-size: 13px; text-decoration: none; } .dec-link-btn:hover { background: rgba(255, 255, 255, .12); } /* ---------- page frame ---------- */ .dec-main { width: 100%; max-width: 1100px; margin: 0 auto; padding: 32px 24px; } .dec-foot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 12px 28px; border-top: 1px solid var(--dec-line); font-size: 12px; color: var(--dec-muted); } .dec-foot a { color: var(--dec-muted); } .dec-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; } .dec-section-head h2 { margin: 0; font-size: 20px; } /* ---------- cards ---------- */ .dec-card { background: var(--dec-surface); border: 1px solid var(--dec-line); border-radius: var(--dec-radius-lg); padding: 24px 28px; box-shadow: var(--dec-shadow); margin-bottom: 18px; } .dec-card > h2 { margin: 0 0 8px; font-size: 17px; } .dec-card > h3 { margin: 18px 0 6px; font-size: 15px; } .dec-card.is-err { border-color: var(--dec-err); color: var(--dec-err); } /* ---------- tiles (application launcher) ---------- */ .dec-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; } .dec-tile { position: relative; display: flex; flex-direction: column; gap: 10px; background: var(--dec-surface); border: 1px solid var(--dec-line); border-radius: var(--dec-radius-lg); padding: 18px 20px 16px; color: inherit; text-decoration: none; box-shadow: var(--dec-shadow); transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .dec-tile:hover, .dec-tile:focus-visible { transform: translateY(-2px); box-shadow: var(--dec-shadow-hover); border-color: var(--dec-brand-2); } .dec-tile-head { display: flex; align-items: center; gap: 12px; } /* Monogram badge: the app's initial in a soft brand well */ .dec-tile-icon { width: 38px; height: 38px; border-radius: 10px; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--dec-brand-soft); color: var(--dec-brand); font-weight: 700; font-size: 16px; letter-spacing: 0; } .dec-tile-title { font-weight: 650; font-size: 16px; flex: 1; min-width: 0; } .dec-tile-desc { margin: 0; color: var(--dec-muted); font-size: 13.5px; line-height: 1.45; } .dec-tile-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 4px; font-size: 13px; color: var(--dec-brand); font-weight: 600; } .dec-tile-foot .dec-open::after { content: " \2192"; } .dec-tile:hover .dec-open::after { content: " \2192"; padding-left: 2px; } /* ---------- buttons ---------- */ .dec-btn { display: inline-block; padding: 10px 18px; border-radius: var(--dec-radius); background: var(--dec-brand); color: var(--dec-on-brand); border: 1px solid var(--dec-brand); text-decoration: none; font: inherit; font-weight: 600; cursor: pointer; line-height: 1.3; } .dec-btn:hover { background: var(--dec-brand-2); border-color: var(--dec-brand-2); } .dec-btn:active { transform: translateY(1px); } .dec-btn:focus-visible { outline: none; box-shadow: var(--dec-focus); } .dec-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; } .dec-btn.is-ghost { background: transparent; color: var(--dec-brand); border-color: transparent; } .dec-btn.is-ghost:hover { background: var(--dec-brand-soft); } .dec-btn.is-secondary { background: var(--dec-surface); color: var(--dec-brand); border-color: var(--dec-brand); } .dec-btn.is-secondary:hover { background: var(--dec-surface-2); } .dec-btn.is-small { padding: 4px 9px; font-size: 12px; font-weight: 500; } /* ---------- status pills / chips / dots ---------- */ .dec-pill { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 600; white-space: nowrap; line-height: 1.5; background: var(--dec-neutral-soft); color: var(--dec-muted); } .dec-pill .dec-dot { width: 7px; height: 7px; background: currentColor; } .dec-pill.is-ok { background: var(--dec-ok-soft); color: var(--dec-ok); } .dec-pill.is-warn { background: var(--dec-warn-soft); color: var(--dec-warn); } .dec-pill.is-err { background: var(--dec-err-soft); color: var(--dec-err); } .dec-pill.is-info { background: var(--dec-info-soft); color: var(--dec-info); } .dec-pill.is-off, .dec-pill.is-unknown { background: var(--dec-neutral-soft); color: var(--dec-neutral); } /* Outlined chip: tags, scopes, small labels */ .dec-chip { display: inline-block; border-radius: 999px; padding: 1px 9px; font-size: 12px; border: 1px solid var(--dec-line); color: var(--dec-ink); white-space: nowrap; } .dec-chip.is-ok { border-color: var(--dec-ok); color: var(--dec-ok); } .dec-chip.is-warn { border-color: var(--dec-warn); color: var(--dec-warn); } .dec-chip.is-err { border-color: var(--dec-err); color: var(--dec-err); } .dec-chip.is-info { border-color: var(--dec-brand-2); color: var(--dec-brand-2); } .dec-chip.is-off { color: var(--dec-muted); } /* Health dot */ .dec-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; background: var(--dec-neutral); } .dec-dot.is-ok { background: var(--dec-ok); } .dec-dot.is-warn { background: var(--dec-warn); } .dec-dot.is-err { background: var(--dec-err); } .dec-dot.is-unknown { background: var(--dec-neutral); } /* ---------- notices / banners ---------- */ .dec-notice { border: 1px solid var(--dec-line); border-left-width: 4px; background: var(--dec-surface); border-radius: var(--dec-radius); padding: 12px 16px; margin-bottom: 18px; font-size: 14px; } .dec-notice.is-warn { background: var(--dec-warn-soft); border-color: var(--dec-warn); color: #6b4e00; } .dec-notice.is-err { background: var(--dec-err-soft); border-color: var(--dec-err); color: var(--dec-err); } .dec-notice.is-info { background: var(--dec-info-soft); border-color: var(--dec-brand-2); } [data-theme="dark"] .dec-notice.is-warn { color: var(--dec-warn); } /* ---------- tables ---------- */ .dec-table-wrap { overflow-x: auto; } .dec-table { width: 100%; border-collapse: collapse; font-size: 14px; } .dec-table th, .dec-table td { text-align: left; padding: 10px 8px; border-top: 1px solid var(--dec-line); vertical-align: top; } .dec-table th { font-weight: 600; color: var(--dec-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; border-top: 0; } .dec-table tbody tr:hover td { background: var(--dec-surface-2); } .dec-table tr.is-off td { color: var(--dec-neutral); } /* ---------- inputs ---------- */ .dec-input { font: inherit; font-size: 14px; padding: 7px 10px; border: 1px solid var(--dec-line); border-radius: 7px; background: var(--dec-surface); color: var(--dec-ink); min-width: 200px; } .dec-input:focus { outline: none; border-color: var(--dec-brand-2); box-shadow: var(--dec-focus); } /* ---------- tab bar (segmented switch) ---------- */ .dec-tabbar { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 14px; } .dec-tabbar button { font: inherit; font-size: 14px; font-weight: 600; color: var(--dec-muted); background: transparent; border: 1px solid var(--dec-line); border-radius: var(--dec-radius); padding: 8px 14px; cursor: pointer; } .dec-tabbar.is-sub { margin: 6px 0 10px; } .dec-tabbar.is-sub button { font-size: 13px; padding: 6px 12px; } .dec-tabbar button:hover { color: var(--dec-brand-2); border-color: var(--dec-brand-2); } .dec-tabbar button.active { color: var(--dec-on-brand); background: var(--dec-brand-2); border-color: var(--dec-brand-2); } /* ---------- responsive ---------- */ @media (max-width: 600px) { .dec-topbar { padding: 12px 16px; } .dec-main { padding: 20px 14px; } }