| :root { |
| --plugin-bg: #eef2f6; |
| --plugin-surface: #ffffff; |
| --plugin-surface-raised: #f9fbfd; |
| --plugin-surface-muted: #f2f5f8; |
| --plugin-border: #d8e0ea; |
| --plugin-border-strong: #aebccc; |
| --plugin-text: #17202d; |
| --plugin-text-soft: #344256; |
| --plugin-muted: #64748b; |
| --plugin-muted-strong: #475569; |
| --plugin-accent: #2563eb; |
| --plugin-accent-strong: #1d4ed8; |
| --plugin-accent-soft: #eff6ff; |
| --plugin-success: #047857; |
| --plugin-success-soft: #ecfdf5; |
| --plugin-warning: #a16207; |
| --plugin-warning-soft: #fffbeb; |
| --plugin-error: #b42318; |
| --plugin-error-soft: #fff1f2; |
| --plugin-focus: #93c5fd; |
| --plugin-radius: 8px; |
| } |
|
|
| * { |
| box-sizing: border-box; |
| } |
|
|
| html { |
| min-width: 0; |
| color-scheme: light; |
| } |
|
|
| body { |
| margin: 0; |
| padding: 24px; |
| color: var(--plugin-text); |
| background: var(--plugin-bg); |
| font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; |
| font-size: 14px; |
| line-height: 1.5; |
| text-rendering: optimizeLegibility; |
| } |
|
|
| button, |
| input, |
| select, |
| textarea { |
| font: inherit; |
| } |
|
|
| button, |
| label, |
| select, |
| input[type="checkbox"], |
| input[type="file"] { |
| cursor: pointer; |
| } |
|
|
| .plugin-shell { |
| width: min(1160px, 100%); |
| min-height: 100vh; |
| margin: 0 auto; |
| } |
|
|
| .plugin-header { |
| display: flex; |
| justify-content: space-between; |
| align-items: flex-start; |
| gap: 16px; |
| margin-bottom: 14px; |
| padding: 14px 16px; |
| border: 1px solid var(--plugin-border); |
| border-radius: var(--plugin-radius); |
| background: var(--plugin-surface); |
| } |
|
|
| .plugin-title { |
| margin: 0; |
| color: var(--plugin-text); |
| font-size: 20px; |
| line-height: 1.25; |
| font-weight: 750; |
| letter-spacing: 0; |
| text-wrap: balance; |
| } |
|
|
| .plugin-subtitle { |
| max-width: 72ch; |
| margin: 5px 0 0; |
| color: var(--plugin-muted-strong); |
| font-size: 13px; |
| text-wrap: pretty; |
| } |
|
|
| .plugin-grid { |
| display: grid; |
| grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); |
| gap: 12px; |
| align-items: stretch; |
| } |
|
|
| .plugin-grid.equal { |
| grid-template-columns: repeat(2, minmax(0, 1fr)); |
| } |
|
|
| .plugin-panel { |
| min-width: 0; |
| height: 100%; |
| background: var(--plugin-surface); |
| border: 1px solid var(--plugin-border); |
| border-radius: var(--plugin-radius); |
| padding: 14px; |
| } |
|
|
| .plugin-panel + .plugin-panel { |
| margin-top: 12px; |
| } |
|
|
| .plugin-grid > .plugin-panel + .plugin-panel { |
| margin-top: 0; |
| } |
|
|
| .plugin-grid + .plugin-panel { |
| margin-top: 12px; |
| } |
|
|
| .plugin-panel-title { |
| margin: 0 0 12px; |
| color: var(--plugin-text); |
| font-size: 13px; |
| line-height: 1.25; |
| font-weight: 750; |
| } |
|
|
| .plugin-stack { |
| display: flex; |
| flex-direction: column; |
| gap: 11px; |
| } |
|
|
| .plugin-row { |
| display: flex; |
| gap: 8px; |
| align-items: center; |
| flex-wrap: wrap; |
| } |
|
|
| .plugin-field { |
| display: flex; |
| min-width: 0; |
| flex-direction: column; |
| gap: 6px; |
| } |
|
|
| .plugin-label { |
| color: var(--plugin-muted-strong); |
| font-size: 12px; |
| font-weight: 700; |
| } |
|
|
| input, |
| select, |
| textarea { |
| width: 100%; |
| min-width: 0; |
| border: 1px solid var(--plugin-border-strong); |
| border-radius: 7px; |
| padding: 8px 10px; |
| color: var(--plugin-text); |
| background: #fff; |
| outline: none; |
| transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease; |
| } |
|
|
| input:hover, |
| select:hover, |
| textarea:hover { |
| border-color: #8fa2b8; |
| } |
|
|
| input:focus, |
| select:focus, |
| textarea:focus { |
| border-color: var(--plugin-accent); |
| box-shadow: 0 0 0 3px var(--plugin-focus); |
| } |
|
|
| input::placeholder, |
| textarea::placeholder { |
| color: #5f6f84; |
| } |
|
|
| textarea { |
| min-height: 170px; |
| resize: vertical; |
| line-height: 1.55; |
| } |
|
|
| input[type="file"] { |
| padding: 6px; |
| background: var(--plugin-surface-raised); |
| } |
|
|
| input[type="file"]::file-selector-button { |
| margin-right: 10px; |
| border: 1px solid var(--plugin-border); |
| border-radius: 6px; |
| padding: 7px 10px; |
| color: var(--plugin-text); |
| background: #fff; |
| font-weight: 650; |
| } |
|
|
| input[type="checkbox"] { |
| width: 15px; |
| height: 15px; |
| accent-color: var(--plugin-accent); |
| } |
|
|
| .plugin-button { |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| gap: 6px; |
| min-height: 34px; |
| border: 1px solid transparent; |
| border-radius: 7px; |
| padding: 8px 12px; |
| color: #fff; |
| background: var(--plugin-accent); |
| font-weight: 700; |
| cursor: pointer; |
| text-decoration: none; |
| transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 120ms ease; |
| } |
|
|
| .plugin-button:hover { |
| background: var(--plugin-accent-strong); |
| } |
|
|
| .plugin-button:active { |
| transform: translateY(1px); |
| } |
|
|
| .plugin-button.secondary { |
| color: var(--plugin-text-soft); |
| background: var(--plugin-surface-muted); |
| border-color: var(--plugin-border); |
| } |
|
|
| .plugin-button.secondary:hover { |
| color: var(--plugin-text); |
| background: #e8eef5; |
| border-color: var(--plugin-border-strong); |
| } |
|
|
| .plugin-button.danger { |
| background: var(--plugin-error); |
| } |
|
|
| .plugin-button:focus-visible { |
| outline: none; |
| box-shadow: 0 0 0 3px var(--plugin-focus); |
| } |
|
|
| .plugin-button:disabled { |
| opacity: .55; |
| cursor: not-allowed; |
| transform: none; |
| } |
|
|
| .plugin-status { |
| display: inline-flex; |
| align-items: center; |
| white-space: nowrap; |
| border: 1px solid var(--plugin-border); |
| border-radius: 999px; |
| padding: 4px 9px; |
| color: var(--plugin-muted-strong); |
| background: var(--plugin-surface-muted); |
| font-size: 12px; |
| font-weight: 750; |
| } |
|
|
| .plugin-status.ok { |
| color: var(--plugin-success); |
| border-color: #a7d8c2; |
| background: var(--plugin-success-soft); |
| } |
|
|
| .plugin-status.warn { |
| color: var(--plugin-warning); |
| border-color: #e9ca84; |
| background: var(--plugin-warning-soft); |
| } |
|
|
| .plugin-status.error { |
| color: var(--plugin-error); |
| border-color: #f0afa9; |
| background: var(--plugin-error-soft); |
| } |
|
|
| .plugin-message { |
| display: none; |
| margin-bottom: 12px; |
| border: 1px solid var(--plugin-border); |
| border-radius: var(--plugin-radius); |
| padding: 10px 12px; |
| color: var(--plugin-muted-strong); |
| background: var(--plugin-surface); |
| white-space: pre-wrap; |
| } |
|
|
| .plugin-message.show { |
| display: block; |
| } |
|
|
| .plugin-message.success { |
| color: var(--plugin-success); |
| border-color: #a7d8c2; |
| background: var(--plugin-success-soft); |
| } |
|
|
| .plugin-message.error { |
| color: var(--plugin-error); |
| border-color: #f0afa9; |
| background: var(--plugin-error-soft); |
| } |
|
|
| .plugin-output { |
| min-height: 80px; |
| max-height: 430px; |
| overflow: auto; |
| border: 1px solid var(--plugin-border); |
| border-radius: var(--plugin-radius); |
| padding: 12px; |
| color: var(--plugin-text-soft); |
| background: var(--plugin-surface-raised); |
| font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; |
| font-size: 12px; |
| line-height: 1.55; |
| white-space: pre-wrap; |
| word-break: break-word; |
| } |
|
|
| .plugin-table { |
| width: 100%; |
| border-collapse: separate; |
| border-spacing: 0; |
| overflow: hidden; |
| border: 1px solid var(--plugin-border); |
| border-radius: var(--plugin-radius); |
| } |
|
|
| .plugin-table th, |
| .plugin-table td { |
| border-bottom: 1px solid var(--plugin-border); |
| padding: 10px; |
| text-align: left; |
| vertical-align: top; |
| } |
|
|
| .plugin-table tr:last-child td { |
| border-bottom: 0; |
| } |
|
|
| .plugin-table th { |
| color: var(--plugin-muted-strong); |
| background: var(--plugin-surface-muted); |
| font-size: 12px; |
| font-weight: 750; |
| } |
|
|
| .plugin-drop { |
| border: 1px dashed var(--plugin-border-strong); |
| border-radius: var(--plugin-radius); |
| padding: 18px; |
| color: var(--plugin-muted-strong); |
| background: var(--plugin-surface-raised); |
| text-align: center; |
| } |
|
|
| .plugin-list { |
| display: flex; |
| flex-direction: column; |
| gap: 8px; |
| } |
|
|
| .plugin-kv { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); |
| gap: 8px; |
| } |
|
|
| .plugin-kv-item { |
| border: 1px solid var(--plugin-border); |
| border-radius: var(--plugin-radius); |
| padding: 10px; |
| background: var(--plugin-surface-raised); |
| } |
|
|
| .plugin-kv-label { |
| display: block; |
| margin-bottom: 4px; |
| color: var(--plugin-muted-strong); |
| font-size: 12px; |
| font-weight: 700; |
| } |
|
|
| .plugin-kv-value { |
| color: var(--plugin-text); |
| font-weight: 750; |
| word-break: break-word; |
| } |
|
|
| .plugin-item { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 10px; |
| border: 1px solid var(--plugin-border); |
| border-radius: var(--plugin-radius); |
| padding: 10px; |
| background: var(--plugin-surface-raised); |
| } |
|
|
| .plugin-muted { |
| color: var(--plugin-muted-strong); |
| } |
|
|
| |
| |
| |
|
|
| .run-log-panel { |
| display: flex; |
| flex-direction: column; |
| gap: 0; |
| } |
|
|
| |
| .run-log-status { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| padding: 8px 10px; |
| margin-bottom: 10px; |
| border: 1px solid var(--plugin-border); |
| border-radius: var(--plugin-radius); |
| background: var(--plugin-surface-raised); |
| font-size: 12px; |
| font-weight: 650; |
| } |
|
|
| .run-log-status-dot { |
| width: 9px; |
| height: 9px; |
| border-radius: 50%; |
| background: var(--plugin-muted); |
| flex-shrink: 0; |
| } |
|
|
| .run-log-status-dot--running { |
| background: var(--plugin-accent); |
| animation: run-log-pulse 1.2s ease-in-out infinite; |
| } |
|
|
| .run-log-status-dot--done { |
| background: var(--plugin-success); |
| } |
|
|
| .run-log-status-dot--error { |
| background: var(--plugin-error); |
| } |
|
|
| @keyframes run-log-pulse { |
| 0%, 100% { opacity: 1; } |
| 50% { opacity: 0.4; } |
| } |
|
|
| |
| .run-log-list { |
| flex: 1; |
| min-height: 80px; |
| max-height: 380px; |
| overflow-y: auto; |
| display: flex; |
| flex-direction: column; |
| gap: 4px; |
| } |
|
|
| |
| .run-log-entry { |
| padding: 8px 10px; |
| border-left: 3px solid var(--plugin-border); |
| border-radius: 0 5px 5px 0; |
| background: var(--plugin-surface-raised); |
| font-size: 12px; |
| } |
|
|
| .run-log-entry--warn { |
| border-left-color: var(--plugin-warning); |
| background: var(--plugin-warning-soft); |
| } |
|
|
| .run-log-entry--error { |
| border-left-color: var(--plugin-error); |
| background: var(--plugin-error-soft); |
| } |
|
|
| |
| .run-log-entry-header { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| margin-bottom: 3px; |
| } |
|
|
| .run-log-entry-ts { |
| color: var(--plugin-muted); |
| font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; |
| font-size: 11px; |
| } |
|
|
| .run-log-entry-stage { |
| color: var(--plugin-muted-strong); |
| font-weight: 700; |
| font-size: 11px; |
| text-transform: uppercase; |
| letter-spacing: 0.03em; |
| } |
|
|
| .run-log-entry-level { |
| display: inline-block; |
| padding: 1px 6px; |
| border-radius: 4px; |
| font-size: 10px; |
| font-weight: 750; |
| } |
|
|
| .run-log-level--info { |
| color: var(--plugin-accent); |
| background: var(--plugin-accent-soft); |
| } |
|
|
| .run-log-level--warning { |
| color: var(--plugin-warning); |
| background: var(--plugin-warning-soft); |
| } |
|
|
| .run-log-level--error { |
| color: var(--plugin-error); |
| background: var(--plugin-error-soft); |
| } |
|
|
| .run-log-level--debug { |
| color: var(--plugin-muted-strong); |
| background: var(--plugin-surface-muted); |
| } |
|
|
| |
| .run-log-entry-message { |
| color: var(--plugin-text-soft); |
| line-height: 1.45; |
| } |
|
|
| |
| .run-log-entry-detail { |
| margin-top: 4px; |
| } |
|
|
| .run-log-entry-detail summary { |
| color: var(--plugin-muted-strong); |
| font-size: 11px; |
| cursor: pointer; |
| } |
|
|
| .run-log-entry-detail pre { |
| margin: 4px 0 0; |
| padding: 6px 8px; |
| border-radius: 5px; |
| background: var(--plugin-surface-muted); |
| font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; |
| font-size: 11px; |
| white-space: pre-wrap; |
| word-break: break-word; |
| max-height: 120px; |
| overflow-y: auto; |
| } |
|
|
| |
| .run-log-entry-artifact { |
| margin-top: 4px; |
| font-size: 11px; |
| color: var(--plugin-muted-strong); |
| } |
|
|
| .run-log-artifact-icon { |
| margin-right: 3px; |
| } |
|
|
| code { |
| border: 1px solid var(--plugin-border); |
| border-radius: 5px; |
| padding: 2px 5px; |
| color: var(--plugin-text-soft); |
| background: var(--plugin-surface-muted); |
| font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; |
| font-size: 12px; |
| } |
|
|
| @media (max-width: 760px) { |
| body { |
| padding: 16px; |
| } |
|
|
| .plugin-header, |
| .plugin-item { |
| flex-direction: column; |
| align-items: stretch; |
| } |
|
|
| .plugin-grid, |
| .plugin-grid.equal { |
| grid-template-columns: 1fr; |
| } |
|
|
| .plugin-button { |
| width: 100%; |
| } |
| } |
|
|
| @media (prefers-reduced-motion: reduce) { |
| *, |
| *::before, |
| *::after { |
| scroll-behavior: auto !important; |
| transition-duration: 0.01ms !important; |
| animation-duration: 0.01ms !important; |
| animation-iteration-count: 1 !important; |
| } |
| } |
|
|
