| @import "./chat.css"; |
|
|
| |
| |
| |
|
|
| .login-gate { |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| min-height: 100vh; |
| min-height: 100dvh; |
| background: var(--bg); |
| padding: 24px; |
| } |
|
|
| .login-gate__theme { |
| position: fixed; |
| top: 16px; |
| right: 16px; |
| z-index: 10; |
| } |
|
|
| .login-gate__card { |
| width: min(520px, 100%); |
| background: var(--card); |
| border: 1px solid var(--border); |
| border-radius: var(--radius-lg); |
| padding: 32px; |
| animation: scale-in 0.25s var(--ease-out); |
| } |
|
|
| .login-gate__header { |
| text-align: center; |
| margin-bottom: 24px; |
| } |
|
|
| .login-gate__logo { |
| width: 48px; |
| height: 48px; |
| margin-bottom: 12px; |
| } |
|
|
| .login-gate__title { |
| font-size: 22px; |
| font-weight: 700; |
| letter-spacing: -0.02em; |
| } |
|
|
| .login-gate__sub { |
| color: var(--muted); |
| font-size: 14px; |
| margin-top: 4px; |
| } |
|
|
| .login-gate__form { |
| display: flex; |
| flex-direction: column; |
| gap: 12px; |
| } |
|
|
| .login-gate__secret-row { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| } |
|
|
| .login-gate__secret-row input { |
| flex: 1; |
| } |
|
|
| .login-gate__secret-row .btn--icon { |
| width: 40px; |
| min-width: 40px; |
| height: 40px; |
| } |
|
|
| .login-gate__connect { |
| margin-top: 4px; |
| width: 100%; |
| justify-content: center; |
| padding: 10px 16px; |
| font-size: 15px; |
| font-weight: 600; |
| } |
|
|
| .login-gate__help { |
| margin-top: 20px; |
| padding-top: 16px; |
| border-top: 1px solid var(--border); |
| } |
|
|
| .login-gate__help-title { |
| font-weight: 600; |
| font-size: 12px; |
| margin-bottom: 10px; |
| color: var(--fg); |
| } |
|
|
| .login-gate__steps { |
| margin: 0; |
| padding-left: 20px; |
| font-size: 12px; |
| line-height: 1.6; |
| color: var(--muted); |
| } |
|
|
| .login-gate__steps li { |
| margin-bottom: 6px; |
| } |
|
|
| .login-gate__steps li:last-child { |
| margin-bottom: 0; |
| } |
|
|
| .login-gate__steps code { |
| display: block; |
| margin: 4px 0 2px; |
| padding: 5px 10px; |
| font-family: var(--font-mono); |
| font-size: 11px; |
| background: var(--bg); |
| border: 1px solid var(--border); |
| border-radius: var(--radius); |
| color: var(--fg); |
| user-select: all; |
| } |
|
|
| .login-gate__docs { |
| margin-top: 10px; |
| font-size: 11px; |
| } |
|
|
| |
| |
| |
|
|
| .update-banner { |
| position: sticky; |
| top: 0; |
| z-index: 10; |
| margin: 0 calc(-1 * var(--shell-pad)) 0; |
| border-radius: 0; |
| border-left: none; |
| border-right: none; |
| text-align: center; |
| font-weight: 500; |
| padding: 10px 16px; |
| } |
|
|
| .update-banner__btn { |
| margin-left: 8px; |
| border-color: var(--danger); |
| color: var(--danger); |
| font-size: 12px; |
| padding: 4px 12px; |
| } |
|
|
| .update-banner__btn:hover:not(:disabled) { |
| background: rgba(239, 68, 68, 0.15); |
| } |
|
|
| .update-banner__close { |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| margin-left: 8px; |
| padding: 2px; |
| background: none; |
| border: none; |
| cursor: pointer; |
| color: var(--danger); |
| opacity: 0.7; |
| transition: opacity 0.15s; |
| } |
| .update-banner__close:hover { |
| opacity: 1; |
| } |
| .update-banner__close svg { |
| width: 16px; |
| height: 16px; |
| fill: none; |
| stroke: currentColor; |
| stroke-width: 2; |
| stroke-linecap: round; |
| } |
|
|
| |
| |
| |
|
|
| .card { |
| border: 1px solid var(--border); |
| background: var(--card); |
| border-radius: var(--radius-lg); |
| padding: 18px; |
| animation: rise 0.25s var(--ease-out) backwards; |
| transition: |
| border-color var(--duration-normal) var(--ease-out), |
| box-shadow var(--duration-normal) var(--ease-out); |
| } |
|
|
| .card:hover { |
| border-color: var(--border-strong); |
| box-shadow: var(--shadow-sm); |
| } |
|
|
| .card-title { |
| font-size: 15px; |
| font-weight: 600; |
| letter-spacing: -0.02em; |
| color: var(--text-strong); |
| } |
|
|
| .card-sub { |
| color: var(--muted); |
| font-size: 13px; |
| margin-top: 6px; |
| line-height: 1.5; |
| } |
|
|
| |
| |
| |
|
|
| .stat { |
| background: var(--card); |
| border-radius: var(--radius-md); |
| padding: 14px 16px; |
| border: 1px solid var(--border); |
| transition: |
| border-color var(--duration-normal) var(--ease-out), |
| box-shadow var(--duration-normal) var(--ease-out); |
| } |
|
|
| .stat:hover { |
| border-color: var(--border-strong); |
| } |
|
|
| .stat-label { |
| color: var(--muted); |
| font-size: 11px; |
| font-weight: 500; |
| text-transform: uppercase; |
| letter-spacing: 0.04em; |
| } |
|
|
| .stat-value { |
| font-size: 24px; |
| font-weight: 700; |
| margin-top: 6px; |
| letter-spacing: -0.03em; |
| line-height: 1.1; |
| } |
|
|
| .stat-value.ok { |
| color: var(--ok); |
| } |
|
|
| .stat-value.warn { |
| color: var(--warn); |
| } |
|
|
| .stat-card { |
| display: grid; |
| gap: 6px; |
| } |
|
|
| .note-title { |
| font-weight: 600; |
| letter-spacing: -0.01em; |
| } |
|
|
| |
| |
| |
|
|
| .status-list { |
| display: grid; |
| gap: 8px; |
| } |
|
|
| .status-list div { |
| display: flex; |
| justify-content: space-between; |
| gap: 12px; |
| padding: 8px 0; |
| border-bottom: 1px solid var(--border); |
| } |
|
|
| .status-list div:last-child { |
| border-bottom: none; |
| } |
|
|
| .account-count { |
| margin-top: 10px; |
| font-size: 12px; |
| font-weight: 500; |
| color: var(--muted); |
| } |
|
|
| .account-card-list { |
| margin-top: 16px; |
| display: grid; |
| gap: 12px; |
| } |
|
|
| .account-card { |
| border: 1px solid var(--border); |
| border-radius: var(--radius-md); |
| padding: 12px; |
| background: var(--bg-elevated); |
| transition: border-color var(--duration-fast) ease; |
| } |
|
|
| .account-card:hover { |
| border-color: var(--border-strong); |
| } |
|
|
| .account-card-header { |
| display: flex; |
| justify-content: space-between; |
| align-items: baseline; |
| gap: 12px; |
| } |
|
|
| .account-card-title { |
| font-weight: 500; |
| } |
|
|
| .account-card-id { |
| font-family: var(--mono); |
| font-size: 12px; |
| color: var(--muted); |
| } |
|
|
| .account-card-status { |
| margin-top: 10px; |
| font-size: 13px; |
| } |
|
|
| .account-card-status div { |
| padding: 4px 0; |
| } |
|
|
| .account-card-error { |
| margin-top: 8px; |
| color: var(--danger); |
| font-size: 12px; |
| } |
|
|
| |
| |
| |
|
|
| .label { |
| color: var(--muted); |
| font-size: 12px; |
| font-weight: 500; |
| } |
|
|
| .pill { |
| display: inline-flex; |
| align-items: center; |
| gap: 5px; |
| border: 1px solid var(--border); |
| padding: 5px 11px; |
| border-radius: var(--radius-full); |
| background: var(--secondary); |
| font-size: 12px; |
| font-weight: 500; |
| transition: border-color var(--duration-fast) ease; |
| } |
|
|
| .pill:hover { |
| border-color: var(--border-strong); |
| } |
|
|
| .pill.danger { |
| border-color: var(--danger-subtle); |
| background: var(--danger-subtle); |
| color: var(--danger); |
| } |
|
|
| |
| |
| |
|
|
| .theme-orb { |
| position: relative; |
| display: inline-flex; |
| align-items: center; |
| } |
|
|
| .theme-orb__trigger { |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| width: 28px; |
| height: 28px; |
| border-radius: var(--radius-full); |
| border: 1px solid var(--border); |
| background: var(--card); |
| cursor: pointer; |
| font-size: 14px; |
| line-height: 1; |
| padding: 0; |
| transition: |
| border-color var(--duration-fast) var(--ease-out), |
| box-shadow var(--duration-fast) var(--ease-out), |
| transform var(--duration-fast) var(--ease-out); |
| } |
|
|
| .theme-orb__trigger:hover { |
| border-color: var(--border-strong); |
| transform: scale(1.08); |
| } |
|
|
| .theme-orb__trigger:focus-visible { |
| outline: none; |
| border-color: var(--ring); |
| box-shadow: var(--focus-ring); |
| } |
|
|
| .theme-orb__menu { |
| position: absolute; |
| right: 0; |
| top: calc(100% + 6px); |
| display: flex; |
| gap: 2px; |
| padding: 4px; |
| border-radius: var(--radius-full); |
| background: var(--card); |
| border: 1px solid var(--border); |
| box-shadow: var(--shadow-md); |
| opacity: 0; |
| visibility: hidden; |
| transform: scale(0.4) translateY(-8px); |
| transform-origin: top right; |
| pointer-events: none; |
| transition: |
| opacity var(--duration-normal) var(--ease-out), |
| transform var(--duration-normal) var(--ease-out); |
| } |
|
|
| .theme-orb--open .theme-orb__menu { |
| opacity: 1; |
| visibility: visible; |
| transform: scale(1) translateY(0); |
| pointer-events: auto; |
| } |
|
|
| .theme-orb__option { |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| width: 28px; |
| height: 28px; |
| border-radius: var(--radius-full); |
| border: 1.5px solid transparent; |
| background: transparent; |
| cursor: pointer; |
| font-size: 14px; |
| line-height: 1; |
| padding: 0; |
| transition: |
| background var(--duration-fast) var(--ease-out), |
| border-color var(--duration-fast) var(--ease-out), |
| transform var(--duration-fast) var(--ease-out); |
| } |
|
|
| .theme-orb__option:hover { |
| background: var(--bg-hover); |
| transform: scale(1.12); |
| } |
|
|
| .theme-orb__option--active { |
| border-color: var(--accent); |
| background: var(--accent-subtle); |
| } |
|
|
| .theme-orb__option:focus-visible { |
| outline: none; |
| box-shadow: var(--focus-ring); |
| } |
|
|
| .theme-icon { |
| width: 14px; |
| height: 14px; |
| stroke: currentColor; |
| fill: none; |
| stroke-width: 1.5px; |
| stroke-linecap: round; |
| stroke-linejoin: round; |
| } |
|
|
| |
| |
| |
|
|
| .statusDot { |
| width: 8px; |
| height: 8px; |
| border-radius: var(--radius-full); |
| background: var(--danger); |
| box-shadow: 0 0 8px rgba(239, 68, 68, 0.5); |
| animation: pulse-subtle 2s ease-in-out infinite; |
| } |
|
|
| .statusDot.ok { |
| background: var(--ok); |
| box-shadow: 0 0 8px rgba(34, 197, 94, 0.5); |
| animation: none; |
| } |
|
|
| .statusDot.warn { |
| background: var(--warn); |
| box-shadow: 0 0 8px rgba(245, 158, 11, 0.5); |
| animation: none; |
| } |
|
|
| |
| |
| |
|
|
| .btn { |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| gap: 6px; |
| border: 1px solid var(--border); |
| background: var(--bg-elevated); |
| padding: 8px 14px; |
| border-radius: var(--radius-md); |
| font-size: 13px; |
| font-weight: 500; |
| letter-spacing: -0.01em; |
| cursor: pointer; |
| transition: |
| border-color var(--duration-fast) var(--ease-out), |
| background var(--duration-fast) var(--ease-out), |
| box-shadow var(--duration-fast) var(--ease-out); |
| } |
|
|
| .btn:hover { |
| background: var(--bg-hover); |
| border-color: var(--border-strong); |
| } |
|
|
| .btn:active { |
| background: var(--secondary); |
| } |
|
|
| .btn svg { |
| width: 16px; |
| height: 16px; |
| stroke: currentColor; |
| fill: none; |
| stroke-width: 1.5px; |
| stroke-linecap: round; |
| stroke-linejoin: round; |
| flex-shrink: 0; |
| } |
|
|
| .btn.primary { |
| border-color: var(--accent); |
| background: var(--accent); |
| color: var(--primary-foreground); |
| box-shadow: 0 1px 3px rgba(255, 92, 92, 0.25); |
| } |
|
|
| .btn.primary:hover { |
| background: var(--accent-hover); |
| border-color: var(--accent-hover); |
| box-shadow: 0 2px 12px rgba(255, 92, 92, 0.3); |
| } |
|
|
| |
| .btn-kbd { |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| margin-left: 6px; |
| padding: 2px 5px; |
| font-family: var(--mono); |
| font-size: 11px; |
| font-weight: 500; |
| line-height: 1; |
| border-radius: 4px; |
| background: rgba(255, 255, 255, 0.15); |
| color: inherit; |
| opacity: 0.8; |
| } |
|
|
| .btn.primary .btn-kbd { |
| background: rgba(255, 255, 255, 0.2); |
| } |
|
|
| :root[data-theme-mode="light"] .btn-kbd { |
| background: rgba(0, 0, 0, 0.08); |
| } |
|
|
| :root[data-theme-mode="light"] .btn.primary .btn-kbd { |
| background: rgba(255, 255, 255, 0.25); |
| } |
|
|
| .btn.active { |
| border-color: var(--accent); |
| background: var(--accent-subtle); |
| color: var(--accent); |
| } |
|
|
| .btn.danger { |
| border-color: transparent; |
| background: var(--danger-subtle); |
| color: var(--danger); |
| } |
|
|
| .btn.danger:hover { |
| background: rgba(239, 68, 68, 0.15); |
| } |
|
|
| .btn--sm { |
| padding: 6px 10px; |
| font-size: 12px; |
| } |
|
|
| .btn:disabled { |
| opacity: 0.5; |
| cursor: not-allowed; |
| } |
|
|
| |
| |
| |
|
|
| .field { |
| display: grid; |
| gap: 6px; |
| } |
|
|
| .field.full { |
| grid-column: 1 / -1; |
| } |
|
|
| .field span { |
| color: var(--muted); |
| font-size: 13px; |
| font-weight: 500; |
| } |
|
|
| .field input, |
| .field textarea, |
| .field select { |
| border: 1px solid var(--input); |
| background: var(--card); |
| border-radius: var(--radius-md); |
| padding: 8px 12px; |
| outline: none; |
| box-shadow: inset 0 1px 0 var(--card-highlight); |
| transition: |
| border-color var(--duration-fast) ease, |
| box-shadow var(--duration-fast) ease; |
| } |
|
|
| .field input:focus, |
| .field textarea:focus, |
| .field select:focus { |
| border-color: var(--ring); |
| box-shadow: var(--focus-ring); |
| } |
|
|
| .field select { |
| appearance: none; |
| padding-right: 36px; |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); |
| background-repeat: no-repeat; |
| background-position: right 10px center; |
| cursor: pointer; |
| } |
|
|
| .field textarea { |
| font-family: var(--mono); |
| min-height: 160px; |
| resize: vertical; |
| white-space: pre; |
| line-height: 1.5; |
| } |
|
|
| .field.checkbox { |
| grid-template-columns: auto 1fr; |
| align-items: center; |
| } |
|
|
| .config-form .field.checkbox { |
| grid-template-columns: 18px minmax(0, 1fr); |
| column-gap: 10px; |
| } |
|
|
| .config-form .field.checkbox input[type="checkbox"] { |
| margin: 0; |
| width: 16px; |
| height: 16px; |
| accent-color: var(--accent); |
| } |
|
|
| .form-grid { |
| display: grid; |
| gap: 12px; |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); |
| } |
|
|
| |
| |
| |
|
|
| .cron-summary-strip { |
| display: flex; |
| justify-content: space-between; |
| align-items: flex-start; |
| gap: 12px 18px; |
| padding: 14px 16px; |
| } |
|
|
| .cron-summary-strip__left { |
| display: grid; |
| gap: 8px 14px; |
| grid-template-columns: repeat(3, minmax(0, 1fr)); |
| flex: 1 1 auto; |
| min-width: 0; |
| } |
|
|
| .cron-summary-item { |
| border: 1px solid var(--border); |
| border-radius: var(--radius-md); |
| background: var(--bg-elevated); |
| padding: 10px 12px; |
| min-height: 62px; |
| display: grid; |
| gap: 6px; |
| } |
|
|
| .cron-summary-item--wide { |
| grid-column: span 1; |
| } |
|
|
| .cron-summary-label { |
| color: var(--muted); |
| font-size: 11px; |
| font-weight: 600; |
| text-transform: uppercase; |
| letter-spacing: 0.04em; |
| } |
|
|
| .cron-summary-value { |
| color: var(--text-strong); |
| font-size: 15px; |
| font-weight: 600; |
| line-height: 1.3; |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| } |
|
|
| .cron-summary-strip__actions { |
| display: flex; |
| align-items: center; |
| justify-content: flex-end; |
| gap: 10px; |
| min-width: 0; |
| } |
|
|
| .cron-workspace { |
| margin-top: 16px; |
| display: grid; |
| grid-template-columns: minmax(0, 1.2fr) minmax(340px, 0.8fr); |
| gap: 16px; |
| align-items: start; |
| } |
|
|
| .cron-workspace-main { |
| display: grid; |
| gap: 16px; |
| } |
|
|
| .cron-workspace-form { |
| position: sticky; |
| top: 74px; |
| max-height: calc(100vh - 74px - 32px); |
| overflow-y: auto; |
| } |
|
|
| .cron-form { |
| margin-top: 16px; |
| display: grid; |
| gap: 14px; |
| } |
|
|
| .cron-form-section { |
| border: 1px solid var(--border); |
| border-radius: var(--radius-md); |
| padding: 14px; |
| background: var(--bg-elevated); |
| display: grid; |
| gap: 12px; |
| } |
|
|
| .cron-form-section__title { |
| font-size: 13px; |
| font-weight: 600; |
| letter-spacing: -0.01em; |
| color: var(--text-strong); |
| } |
|
|
| .cron-form-section__sub { |
| color: var(--muted); |
| font-size: 12px; |
| line-height: 1.45; |
| } |
|
|
| .cron-form-grid { |
| grid-template-columns: repeat(2, minmax(0, 1fr)); |
| gap: 14px 16px; |
| } |
|
|
| .cron-help { |
| color: var(--muted); |
| font-size: 12px; |
| line-height: 1.45; |
| margin-top: 2px; |
| } |
|
|
| .cron-error { |
| color: var(--danger-color); |
| } |
|
|
| .cron-required-legend { |
| color: var(--muted); |
| font-size: 12px; |
| line-height: 1.4; |
| } |
|
|
| .cron-required-marker { |
| color: var(--danger-color); |
| font-weight: 700; |
| margin-left: 3px; |
| } |
|
|
| .cron-required-sr { |
| position: absolute; |
| width: 1px; |
| height: 1px; |
| padding: 0; |
| margin: -1px; |
| overflow: hidden; |
| clip: rect(0, 0, 0, 0); |
| white-space: nowrap; |
| border: 0; |
| } |
|
|
| .field input[aria-invalid="true"], |
| .field textarea[aria-invalid="true"], |
| .field select[aria-invalid="true"] { |
| border-color: var(--danger); |
| box-shadow: |
| inset 0 1px 0 var(--card-highlight), |
| 0 0 0 1px rgba(239, 68, 68, 0.2); |
| } |
|
|
| .cron-form-status { |
| margin-top: 4px; |
| border: 1px solid var(--danger-subtle); |
| background: var(--danger-subtle); |
| border-radius: var(--radius-md); |
| padding: 10px 12px; |
| } |
|
|
| .cron-form-status__title { |
| color: var(--text-strong); |
| font-size: 13px; |
| font-weight: 600; |
| margin-bottom: 6px; |
| } |
|
|
| .cron-form-status__list { |
| margin: 8px 0 0; |
| padding: 0; |
| list-style: none; |
| display: grid; |
| gap: 6px; |
| } |
|
|
| .cron-form-status__link { |
| border: 0; |
| background: transparent; |
| color: var(--text); |
| cursor: pointer; |
| font-size: 12px; |
| line-height: 1.4; |
| padding: 0; |
| text-align: left; |
| text-decoration: underline; |
| text-underline-offset: 2px; |
| } |
|
|
| .cron-form-status__link:hover { |
| color: var(--text-strong); |
| } |
|
|
| .cron-span-2 { |
| grid-column: 1 / -1; |
| } |
|
|
| .cron-checkbox { |
| align-items: center; |
| grid-template-columns: 16px minmax(0, 1fr); |
| column-gap: 10px; |
| } |
|
|
| .cron-checkbox input[type="checkbox"] { |
| margin: 2px 0 0; |
| width: 16px; |
| height: 16px; |
| accent-color: var(--accent); |
| } |
|
|
| .cron-checkbox .field-checkbox__label { |
| color: var(--text-strong); |
| font-size: 13px; |
| font-weight: 500; |
| } |
|
|
| .cron-checkbox .cron-help { |
| grid-column: 2; |
| } |
|
|
| .cron-checkbox-inline { |
| align-content: start; |
| align-items: start; |
| padding-top: 28px; |
| } |
|
|
| .cron-advanced { |
| border: 1px solid var(--border); |
| border-radius: var(--radius-md); |
| padding: 12px; |
| background: var(--bg-elevated); |
| display: grid; |
| gap: 10px; |
| } |
|
|
| .cron-advanced__summary { |
| cursor: pointer; |
| color: var(--muted); |
| font-size: 13px; |
| font-weight: 500; |
| } |
|
|
| .cron-stagger-group { |
| display: grid; |
| grid-template-columns: minmax(0, 1fr) 180px; |
| gap: 14px 16px; |
| align-items: start; |
| } |
|
|
| .cron-form-actions { |
| margin-top: 14px; |
| justify-content: flex-start; |
| align-items: center; |
| gap: 10px 14px; |
| flex-wrap: wrap; |
| } |
|
|
| .cron-submit-reason { |
| color: var(--muted); |
| font-size: 12px; |
| line-height: 1.4; |
| } |
|
|
| .cron-filter-search { |
| flex: 1 1 320px; |
| min-width: 280px; |
| } |
|
|
| .cron-workspace .filters .field { |
| min-width: 160px; |
| } |
|
|
| .cron-run-filters { |
| margin-top: 12px; |
| display: grid; |
| gap: 12px; |
| } |
|
|
| .cron-run-filters__row { |
| display: grid; |
| gap: 12px; |
| } |
|
|
| .cron-run-filters__row--primary { |
| grid-template-columns: minmax(160px, 220px) minmax(240px, 1fr) minmax(160px, 220px); |
| } |
|
|
| .cron-run-filters__row--secondary { |
| grid-template-columns: repeat(2, minmax(220px, 1fr)); |
| } |
|
|
| .cron-run-filter-search { |
| min-width: 0; |
| } |
|
|
| .cron-filter-dropdown { |
| min-width: 0; |
| } |
|
|
| .cron-filter-dropdown__details { |
| position: relative; |
| } |
|
|
| .cron-filter-dropdown__details > summary { |
| list-style: none; |
| } |
|
|
| .cron-filter-dropdown__details > summary::-webkit-details-marker { |
| display: none; |
| } |
|
|
| .cron-filter-dropdown__trigger { |
| width: 100%; |
| justify-content: space-between; |
| text-align: left; |
| } |
|
|
| .cron-filter-dropdown__panel { |
| position: absolute; |
| z-index: 30; |
| top: calc(100% + 8px); |
| left: 0; |
| width: min(360px, calc(100vw - 48px)); |
| border: 1px solid var(--border); |
| border-radius: var(--radius-md); |
| background: var(--bg-elevated); |
| padding: 10px; |
| display: grid; |
| gap: 10px; |
| box-shadow: var(--shadow-card); |
| } |
|
|
| .cron-filter-dropdown__list { |
| display: grid; |
| gap: 6px; |
| } |
|
|
| .cron-filter-dropdown__option { |
| display: grid; |
| grid-template-columns: 16px minmax(0, 1fr); |
| gap: 8px; |
| align-items: center; |
| color: var(--text); |
| font-size: 13px; |
| } |
|
|
| .cron-filter-dropdown__option input[type="checkbox"] { |
| width: 16px; |
| height: 16px; |
| margin: 0; |
| accent-color: var(--accent); |
| } |
|
|
| .cron-run-entry { |
| align-items: start; |
| } |
|
|
| .cron-run-entry__meta { |
| text-align: right; |
| min-width: 220px; |
| } |
|
|
| .cron-run-entry__summary { |
| white-space: pre-wrap; |
| line-height: 1.45; |
| } |
|
|
| @media (max-width: 1100px) { |
| .cron-summary-strip { |
| flex-direction: column; |
| } |
|
|
| .cron-summary-strip__left { |
| grid-template-columns: repeat(2, minmax(0, 1fr)); |
| width: 100%; |
| } |
|
|
| .cron-summary-strip__actions { |
| width: 100%; |
| justify-content: flex-start; |
| flex-wrap: wrap; |
| } |
|
|
| .cron-workspace { |
| grid-template-columns: 1fr; |
| } |
|
|
| .cron-workspace-form { |
| position: static; |
| order: -1; |
| } |
|
|
| .cron-form-grid { |
| grid-template-columns: 1fr; |
| gap: 12px; |
| } |
|
|
| .cron-span-2 { |
| grid-column: auto; |
| } |
|
|
| .cron-checkbox-inline { |
| padding-top: 0; |
| } |
|
|
| .cron-stagger-group { |
| grid-template-columns: 1fr; |
| gap: 12px; |
| } |
|
|
| .cron-filter-search { |
| min-width: 0; |
| flex: 1 1 100%; |
| } |
|
|
| .cron-run-filters__row--primary, |
| .cron-run-filters__row--secondary { |
| grid-template-columns: 1fr; |
| } |
|
|
| .cron-filter-dropdown__panel { |
| width: 100%; |
| max-width: none; |
| position: static; |
| margin-top: 8px; |
| } |
|
|
| .cron-run-entry__meta { |
| min-width: 0; |
| text-align: left; |
| } |
| } |
|
|
| :root[data-theme-mode="light"] .field input, |
| :root[data-theme-mode="light"] .field textarea, |
| :root[data-theme-mode="light"] .field select { |
| background: var(--card); |
| border-color: var(--input); |
| } |
|
|
| :root[data-theme-mode="light"] .btn { |
| background: var(--bg); |
| border-color: var(--input); |
| } |
|
|
| :root[data-theme-mode="light"] .btn:hover { |
| background: var(--bg-hover); |
| } |
|
|
| :root[data-theme-mode="light"] .btn.active { |
| border-color: var(--accent); |
| background: var(--accent-subtle); |
| color: var(--accent); |
| } |
|
|
| :root[data-theme-mode="light"] .btn.primary { |
| background: var(--accent); |
| border-color: var(--accent); |
| } |
|
|
| |
| |
| |
|
|
| .muted { |
| color: var(--muted); |
| } |
|
|
| .mono { |
| font-family: var(--mono); |
| } |
|
|
| |
| |
| |
|
|
| .callout { |
| padding: 14px 16px; |
| border-radius: var(--radius-md); |
| background: var(--secondary); |
| border: 1px solid var(--border); |
| font-size: 13px; |
| line-height: 1.5; |
| position: relative; |
| } |
|
|
| .callout.danger { |
| border-color: rgba(239, 68, 68, 0.25); |
| background: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, rgba(239, 68, 68, 0.04) 100%); |
| color: var(--danger); |
| } |
|
|
| .callout.info { |
| border-color: rgba(59, 130, 246, 0.25); |
| background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(59, 130, 246, 0.04) 100%); |
| color: var(--info); |
| } |
|
|
| .callout.success { |
| border-color: rgba(34, 197, 94, 0.25); |
| background: linear-gradient(135deg, rgba(34, 197, 94, 0.08) 0%, rgba(34, 197, 94, 0.04) 100%); |
| color: var(--ok); |
| } |
|
|
| |
| .compaction-indicator { |
| align-self: center; |
| display: inline-flex; |
| align-items: center; |
| gap: 6px; |
| font-size: 13px; |
| line-height: 1.2; |
| padding: 6px 14px; |
| margin-bottom: 8px; |
| border-radius: 999px; |
| border: 1px solid var(--border); |
| background: var(--panel-strong); |
| color: var(--text); |
| white-space: nowrap; |
| user-select: none; |
| animation: fade-in 0.2s var(--ease-out); |
| } |
|
|
| .compaction-indicator svg { |
| width: 16px; |
| height: 16px; |
| stroke: currentColor; |
| fill: none; |
| stroke-width: 1.5px; |
| stroke-linecap: round; |
| stroke-linejoin: round; |
| flex-shrink: 0; |
| } |
|
|
| .compaction-indicator--active { |
| color: var(--info); |
| border-color: rgba(59, 130, 246, 0.35); |
| } |
|
|
| .compaction-indicator--active svg { |
| animation: compaction-spin 1s linear infinite; |
| } |
|
|
| .compaction-indicator--complete { |
| color: var(--ok); |
| border-color: rgba(34, 197, 94, 0.35); |
| } |
|
|
| .compaction-indicator--fallback { |
| color: #d97706; |
| border-color: rgba(217, 119, 6, 0.35); |
| } |
|
|
| .compaction-indicator--fallback-cleared { |
| color: var(--ok); |
| border-color: rgba(34, 197, 94, 0.35); |
| } |
|
|
| @keyframes compaction-spin { |
| to { |
| transform: rotate(360deg); |
| } |
| } |
|
|
| |
| |
| |
|
|
| .code-block { |
| font-family: var(--mono); |
| font-size: 13px; |
| line-height: 1.5; |
| background: var(--secondary); |
| padding: 12px; |
| border-radius: var(--radius-md); |
| border: 1px solid var(--border); |
| max-height: 360px; |
| overflow: auto; |
| max-width: 100%; |
| } |
|
|
| :root[data-theme-mode="light"] .code-block, |
| :root[data-theme-mode="light"] .list-item, |
| :root[data-theme-mode="light"] .table-row, |
| :root[data-theme-mode="light"] .chip { |
| background: var(--bg); |
| } |
|
|
| .markdown-plain-text-fallback { |
| display: block; |
| white-space: pre-wrap; |
| overflow-wrap: anywhere; |
| word-break: break-word; |
| font: inherit; |
| } |
|
|
| |
| |
| |
|
|
| .list { |
| display: grid; |
| gap: 8px; |
| container-type: inline-size; |
| } |
|
|
| .list-item { |
| display: grid; |
| grid-template-columns: minmax(0, 1fr) minmax(200px, 260px); |
| gap: 16px; |
| align-items: start; |
| border: 1px solid var(--border); |
| border-radius: var(--radius-md); |
| padding: 12px; |
| background: var(--card); |
| transition: border-color var(--duration-fast) ease; |
| } |
|
|
| .list-item-clickable { |
| cursor: pointer; |
| } |
|
|
| .list-item-clickable:hover { |
| border-color: var(--border-strong); |
| } |
|
|
| .list-item-selected { |
| border-color: var(--accent); |
| box-shadow: var(--focus-ring); |
| } |
|
|
| .list-main { |
| display: grid; |
| gap: 4px; |
| min-width: 0; |
| } |
|
|
| .list-title { |
| font-weight: 500; |
| } |
|
|
| .list-sub { |
| color: var(--muted); |
| font-size: 12px; |
| } |
|
|
| .list-meta { |
| text-align: right; |
| color: var(--muted); |
| font-size: 12px; |
| display: grid; |
| gap: 4px; |
| min-width: 200px; |
| } |
|
|
| .list-meta .btn { |
| padding: 6px 10px; |
| } |
|
|
| .list-meta .field input, |
| .list-meta .field textarea, |
| .list-meta .field select { |
| width: 100%; |
| } |
|
|
| |
| .debug-event-log__item { |
| grid-template-columns: minmax(0, 1fr); |
| } |
|
|
| .debug-event-log__meta { |
| min-width: 0; |
| text-align: left; |
| } |
|
|
| .debug-event-log__payload { |
| margin: 0; |
| max-width: 100%; |
| } |
|
|
| |
| .cron-job-payload, |
| .cron-job-agent, |
| .cron-job-state { |
| overflow-wrap: anywhere; |
| word-break: break-word; |
| } |
|
|
| .cron-job .list-title { |
| font-weight: 600; |
| font-size: 15px; |
| letter-spacing: -0.015em; |
| } |
|
|
| .cron-job { |
| grid-template-columns: minmax(0, 1fr) minmax(240px, 300px); |
| grid-template-areas: |
| "main meta" |
| "footer footer"; |
| row-gap: 10px; |
| } |
|
|
| .cron-job .list-main { |
| grid-area: main; |
| } |
|
|
| .cron-job .list-meta { |
| grid-area: meta; |
| min-width: 240px; |
| gap: 8px; |
| } |
|
|
| .cron-job-footer { |
| grid-area: footer; |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| gap: 12px; |
| border-top: 1px solid var(--border); |
| padding-top: 10px; |
| } |
|
|
| .cron-job-chips { |
| flex: 1 1 auto; |
| } |
|
|
| .cron-job-detail { |
| display: grid; |
| gap: 3px; |
| margin-top: 2px; |
| } |
|
|
| .cron-job-detail-label { |
| color: var(--muted); |
| font-size: 11px; |
| font-weight: 600; |
| letter-spacing: 0.03em; |
| text-transform: uppercase; |
| } |
|
|
| .cron-job-detail-value { |
| font-size: 13px; |
| line-height: 1.35; |
| } |
|
|
| .cron-job-state { |
| display: grid; |
| gap: 4px; |
| } |
|
|
| .cron-job-state-row { |
| display: flex; |
| justify-content: space-between; |
| align-items: baseline; |
| gap: 10px; |
| } |
|
|
| .cron-job-state-key { |
| color: var(--muted); |
| font-size: 10px; |
| font-weight: 600; |
| letter-spacing: 0.05em; |
| text-transform: uppercase; |
| } |
|
|
| .cron-job-state-value { |
| color: var(--text); |
| font-size: 12px; |
| white-space: nowrap; |
| } |
|
|
| .cron-job-status-pill { |
| font-size: 11px; |
| font-weight: 600; |
| border: 1px solid var(--border); |
| border-radius: var(--radius-full); |
| padding: 2px 8px; |
| text-transform: lowercase; |
| } |
|
|
| .cron-job-status-ok { |
| color: var(--ok); |
| border-color: rgba(34, 197, 94, 0.35); |
| background: var(--ok-subtle); |
| } |
|
|
| .cron-job-status-error { |
| color: var(--danger); |
| border-color: rgba(239, 68, 68, 0.35); |
| background: var(--danger-subtle); |
| } |
|
|
| .cron-job-status-skipped { |
| color: var(--warn); |
| border-color: rgba(245, 158, 11, 0.35); |
| background: var(--warn-subtle); |
| } |
|
|
| .cron-job-status-na { |
| color: var(--muted); |
| } |
|
|
| .cron-job-actions { |
| flex-wrap: wrap; |
| justify-content: flex-end; |
| margin-top: 0; |
| } |
|
|
| .cron-job-actions .btn { |
| flex: 0 0 auto; |
| } |
|
|
| @container (max-width: 560px) { |
| .list-item { |
| grid-template-columns: 1fr; |
| } |
|
|
| .list-meta { |
| min-width: 0; |
| text-align: left; |
| } |
|
|
| .cron-job-actions { |
| justify-content: flex-start; |
| } |
|
|
| .cron-job { |
| grid-template-columns: 1fr; |
| grid-template-areas: |
| "main" |
| "meta" |
| "footer"; |
| } |
|
|
| .cron-job-footer { |
| flex-direction: column; |
| align-items: stretch; |
| } |
| } |
|
|
| |
| |
| |
|
|
| .chip-row { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 8px; |
| } |
|
|
| .chip { |
| font-size: 12px; |
| font-weight: 500; |
| border: 1px solid var(--border); |
| border-radius: var(--radius-full); |
| padding: 5px 12px; |
| color: var(--muted); |
| background: var(--secondary); |
| transition: |
| border-color var(--duration-fast) var(--ease-out), |
| background var(--duration-fast) var(--ease-out), |
| transform var(--duration-fast) var(--ease-out); |
| } |
|
|
| .chip:hover { |
| border-color: var(--border-strong); |
| transform: translateY(-1px); |
| } |
|
|
| .chip input { |
| margin-right: 6px; |
| } |
|
|
| .chip-ok { |
| color: var(--ok); |
| border-color: rgba(34, 197, 94, 0.3); |
| background: var(--ok-subtle); |
| } |
|
|
| .chip-warn { |
| color: var(--warn); |
| border-color: rgba(245, 158, 11, 0.3); |
| background: var(--warn-subtle); |
| } |
|
|
| .chip-danger { |
| color: var(--danger); |
| border-color: rgba(239, 68, 68, 0.3); |
| background: var(--danger-subtle); |
| } |
|
|
| |
| |
| |
|
|
| .table { |
| display: grid; |
| container-type: inline-size; |
| gap: 6px; |
| } |
|
|
| .table-head, |
| .table-row { |
| display: grid; |
| grid-template-columns: 1.4fr 1fr 0.8fr 0.7fr 0.8fr 0.8fr 0.8fr 0.8fr 0.6fr; |
| gap: 12px; |
| align-items: center; |
| } |
|
|
| .table-head { |
| font-size: 12px; |
| font-weight: 500; |
| color: var(--muted); |
| padding: 0 12px; |
| } |
|
|
| .table-row { |
| border: 1px solid var(--border); |
| padding: 10px 12px; |
| border-radius: var(--radius-md); |
| background: var(--card); |
| transition: border-color var(--duration-fast) ease; |
| } |
|
|
| .table-row:hover { |
| border-color: var(--border-strong); |
| } |
|
|
| @media (max-width: 1100px) { |
| .table-head, |
| .table-row { |
| grid-template-columns: 1fr; |
| } |
| } |
|
|
| @container (max-width: 1100px) { |
| .table-head, |
| .table-row { |
| grid-template-columns: 1fr; |
| } |
| } |
|
|
| .session-link { |
| text-decoration: none; |
| color: var(--accent); |
| font-weight: 500; |
| } |
|
|
| .session-link:hover { |
| text-decoration: underline; |
| } |
|
|
| .session-key-cell { |
| display: grid; |
| gap: 4px; |
| min-width: 0; |
| } |
|
|
| .session-key-cell .session-link, |
| .session-key-display-name { |
| overflow-wrap: anywhere; |
| word-break: break-word; |
| } |
|
|
| .session-key-display-name { |
| font-size: 11px; |
| } |
|
|
| |
| |
| |
|
|
| .data-table-wrapper { |
| border: 1px solid var(--border); |
| border-radius: var(--radius-md); |
| overflow: hidden; |
| } |
|
|
| .data-table-toolbar { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| padding: 10px 12px; |
| border-bottom: 1px solid var(--border); |
| background: var(--bg-elevated); |
| } |
|
|
| .data-table-search { |
| flex: 1; |
| min-width: 0; |
| } |
|
|
| .data-table-search input { |
| width: 100%; |
| padding: 6px 10px; |
| font-size: 13px; |
| color: var(--text); |
| background: var(--card); |
| border: 1px solid var(--border); |
| border-radius: var(--radius-sm); |
| outline: none; |
| transition: border-color var(--duration-fast) ease; |
| } |
|
|
| .data-table-search input:focus { |
| border-color: var(--border-strong); |
| box-shadow: var(--focus-ring); |
| } |
|
|
| .data-table-search input::placeholder { |
| color: var(--muted); |
| } |
|
|
| .data-table-container { |
| overflow-x: auto; |
| } |
|
|
| .data-table { |
| width: 100%; |
| border-collapse: collapse; |
| font-size: 13px; |
| } |
|
|
| .data-table thead { |
| position: sticky; |
| top: 0; |
| z-index: 1; |
| } |
|
|
| .data-table th { |
| padding: 10px 12px; |
| text-align: left; |
| font-weight: 600; |
| font-size: 12px; |
| color: var(--muted); |
| background: var(--bg-elevated); |
| border-bottom: 1px solid var(--border); |
| white-space: nowrap; |
| user-select: none; |
| text-transform: uppercase; |
| letter-spacing: 0.04em; |
| } |
|
|
| .data-table th[data-sortable] { |
| cursor: pointer; |
| transition: color var(--duration-fast) ease; |
| } |
|
|
| .data-table th[data-sortable]:hover { |
| color: var(--text); |
| } |
|
|
| .data-table-sort-icon { |
| display: inline-flex; |
| vertical-align: middle; |
| margin-left: 4px; |
| opacity: 0.4; |
| transition: opacity var(--duration-fast) ease; |
| } |
|
|
| .data-table-sort-icon svg { |
| width: 14px; |
| height: 14px; |
| stroke: currentColor; |
| fill: none; |
| stroke-width: 1.5px; |
| } |
|
|
| .data-table th[data-sortable]:hover .data-table-sort-icon { |
| opacity: 0.7; |
| } |
|
|
| .data-table th[data-sort-dir="asc"] .data-table-sort-icon, |
| .data-table th[data-sort-dir="desc"] .data-table-sort-icon { |
| opacity: 1; |
| color: var(--text); |
| } |
|
|
| .data-table th[data-sort-dir="desc"] .data-table-sort-icon svg { |
| transform: rotate(180deg); |
| } |
|
|
| .data-table td { |
| padding: 10px 12px; |
| border-bottom: 1px solid var(--border); |
| color: var(--text); |
| vertical-align: middle; |
| } |
|
|
| .data-table tbody tr { |
| transition: background var(--duration-fast) ease; |
| } |
|
|
| .data-table tbody tr:hover { |
| background: var(--bg-hover); |
| } |
|
|
| .data-table tbody tr:last-child td { |
| border-bottom: none; |
| } |
|
|
| |
| .data-table-badge { |
| display: inline-block; |
| padding: 2px 8px; |
| font-size: 11px; |
| font-weight: 600; |
| border-radius: var(--radius-full); |
| letter-spacing: 0.02em; |
| } |
|
|
| .data-table-badge--direct { |
| color: var(--accent-2); |
| background: var(--accent-2-subtle); |
| } |
|
|
| .data-table-badge--group { |
| color: var(--info); |
| background: rgba(59, 130, 246, 0.1); |
| } |
|
|
| .data-table-badge--global { |
| color: var(--warn); |
| background: var(--warn-subtle); |
| } |
|
|
| .data-table-badge--unknown { |
| color: var(--muted); |
| background: var(--bg-hover); |
| } |
|
|
| |
| .data-table-pagination { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 12px; |
| padding: 10px 12px; |
| border-top: 1px solid var(--border); |
| background: var(--bg-elevated); |
| font-size: 13px; |
| color: var(--muted); |
| } |
|
|
| .data-table-pagination__controls { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| } |
|
|
| .data-table-pagination__controls button { |
| padding: 4px 12px; |
| font-size: 13px; |
| border: 1px solid var(--border); |
| border-radius: var(--radius-sm); |
| background: var(--card); |
| color: var(--text); |
| cursor: pointer; |
| transition: |
| background var(--duration-fast) ease, |
| border-color var(--duration-fast) ease; |
| } |
|
|
| .data-table-pagination__controls button:hover:not(:disabled) { |
| background: var(--bg-hover); |
| border-color: var(--border-strong); |
| } |
|
|
| .data-table-pagination__controls button:disabled { |
| opacity: 0.4; |
| cursor: not-allowed; |
| } |
|
|
| |
| .data-table-row-actions { |
| position: relative; |
| } |
|
|
| .data-table-row-actions__trigger { |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| width: 32px; |
| height: 32px; |
| border: 1px solid transparent; |
| border-radius: var(--radius-sm); |
| background: transparent; |
| color: var(--muted); |
| cursor: pointer; |
| transition: |
| background var(--duration-fast) ease, |
| color var(--duration-fast) ease, |
| border-color var(--duration-fast) ease; |
| } |
|
|
| .data-table-row-actions__trigger svg { |
| width: 16px; |
| height: 16px; |
| stroke: currentColor; |
| fill: none; |
| stroke-width: 2px; |
| } |
|
|
| .data-table-row-actions__trigger:hover { |
| background: var(--bg-hover); |
| color: var(--text); |
| border-color: var(--border); |
| } |
|
|
| .data-table-row-actions__menu { |
| position: absolute; |
| right: 0; |
| top: 100%; |
| z-index: 42; |
| min-width: 140px; |
| background: var(--popover); |
| border: 1px solid var(--border-strong); |
| border-radius: var(--radius-md); |
| box-shadow: var(--shadow-md); |
| padding: 4px; |
| animation: fade-in var(--duration-fast) ease; |
| } |
|
|
| .data-table-row-actions__menu a, |
| .data-table-row-actions__menu button { |
| display: block; |
| width: 100%; |
| padding: 8px 12px; |
| font-size: 13px; |
| text-align: left; |
| text-decoration: none; |
| color: var(--text); |
| background: transparent; |
| border: none; |
| border-radius: var(--radius-sm); |
| cursor: pointer; |
| transition: background var(--duration-fast) ease; |
| } |
|
|
| .data-table-row-actions__menu a:hover, |
| .data-table-row-actions__menu button:hover { |
| background: var(--bg-hover); |
| } |
|
|
| .data-table-row-actions__menu button.danger { |
| color: var(--danger); |
| } |
|
|
| .data-table-row-actions__menu button.danger:hover { |
| background: var(--danger-subtle); |
| } |
|
|
| |
| .data-table-overlay { |
| position: fixed; |
| inset: 0; |
| z-index: 40; |
| background: transparent; |
| } |
|
|
| |
| .field-inline { |
| display: inline-flex; |
| align-items: center; |
| gap: 6px; |
| font-size: 13px; |
| color: var(--text); |
| } |
|
|
| .field-inline span { |
| color: var(--muted); |
| font-weight: 500; |
| white-space: nowrap; |
| } |
|
|
| .field-inline input[type="text"], |
| .field-inline input:not([type]) { |
| padding: 6px 10px; |
| font-size: 13px; |
| color: var(--text); |
| background: var(--card); |
| border: 1px solid var(--border); |
| border-radius: var(--radius-sm); |
| outline: none; |
| transition: border-color var(--duration-fast) ease; |
| } |
|
|
| .field-inline input:focus { |
| border-color: var(--border-strong); |
| box-shadow: var(--focus-ring); |
| } |
|
|
| .field-inline.checkbox { |
| gap: 4px; |
| cursor: pointer; |
| } |
|
|
| .field-inline.checkbox input[type="checkbox"] { |
| accent-color: var(--accent); |
| } |
|
|
| |
| |
| |
|
|
| .log-stream { |
| border: 1px solid var(--border); |
| border-radius: var(--radius-md); |
| background: var(--card); |
| max-height: 500px; |
| overflow: auto; |
| container-type: inline-size; |
| } |
|
|
| .log-row { |
| display: grid; |
| grid-template-columns: 90px 70px minmax(140px, 200px) minmax(0, 1fr); |
| gap: 12px; |
| align-items: start; |
| padding: 8px 12px; |
| border-bottom: 1px solid var(--border); |
| font-size: 12px; |
| transition: background var(--duration-fast) ease; |
| } |
|
|
| .log-row:hover { |
| background: var(--bg-hover); |
| } |
|
|
| .log-row:last-child { |
| border-bottom: none; |
| } |
|
|
| .log-time { |
| color: var(--muted); |
| font-family: var(--mono); |
| } |
|
|
| .log-level { |
| font-size: 11px; |
| font-weight: 500; |
| border: 1px solid var(--border); |
| border-radius: var(--radius-sm); |
| padding: 2px 6px; |
| width: fit-content; |
| } |
|
|
| .log-level.trace, |
| .log-level.debug { |
| color: var(--muted); |
| } |
|
|
| .log-level.info { |
| color: var(--info); |
| border-color: rgba(59, 130, 246, 0.3); |
| } |
|
|
| .log-level.warn { |
| color: var(--warn); |
| border-color: var(--warn-subtle); |
| } |
|
|
| .log-level.error, |
| .log-level.fatal { |
| color: var(--danger); |
| border-color: var(--danger-subtle); |
| } |
|
|
| .log-chip.trace, |
| .log-chip.debug { |
| color: var(--muted); |
| } |
|
|
| .log-chip.info { |
| color: var(--info); |
| border-color: rgba(59, 130, 246, 0.3); |
| } |
|
|
| .log-chip.warn { |
| color: var(--warn); |
| border-color: var(--warn-subtle); |
| } |
|
|
| .log-chip.error, |
| .log-chip.fatal { |
| color: var(--danger); |
| border-color: var(--danger-subtle); |
| } |
|
|
| .log-subsystem { |
| color: var(--muted); |
| font-family: var(--mono); |
| } |
|
|
| .log-message { |
| white-space: pre-wrap; |
| word-break: break-word; |
| font-family: var(--mono); |
| } |
|
|
| @container (max-width: 620px) { |
| .log-row { |
| grid-template-columns: 70px 60px minmax(0, 1fr); |
| } |
|
|
| .log-subsystem { |
| display: none; |
| } |
| } |
|
|
| |
| |
| |
|
|
| .chat { |
| display: flex; |
| flex-direction: column; |
| min-height: 0; |
| } |
|
|
| .shell--chat .chat { |
| flex: 1; |
| } |
|
|
| .chat-header { |
| display: flex; |
| justify-content: space-between; |
| align-items: flex-end; |
| gap: 16px; |
| flex-wrap: wrap; |
| } |
|
|
| .chat-header__left { |
| display: flex; |
| align-items: flex-end; |
| gap: 12px; |
| flex-wrap: wrap; |
| min-width: 0; |
| } |
|
|
| .chat-header__right { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| } |
|
|
| .chat-session { |
| min-width: 240px; |
| } |
|
|
| .chat-thread { |
| margin-top: 0; |
| display: flex; |
| flex-direction: column; |
| gap: 12px; |
| flex: 1; |
| min-height: 0; |
| overflow-y: auto; |
| overflow-x: hidden; |
| padding: 0 12px 16px; |
| min-width: 0; |
| border-radius: 0; |
| border: none; |
| background: transparent; |
| } |
|
|
| |
| .chat-queue { |
| margin-top: 12px; |
| padding: 12px; |
| border-radius: var(--radius-lg); |
| border: 1px solid var(--border); |
| background: var(--card); |
| display: grid; |
| gap: 8px; |
| } |
|
|
| .chat-queue__title { |
| font-family: var(--mono); |
| font-size: 12px; |
| font-weight: 500; |
| color: var(--muted); |
| } |
|
|
| .chat-queue__list { |
| display: grid; |
| gap: 8px; |
| } |
|
|
| .chat-queue__item { |
| display: grid; |
| grid-template-columns: minmax(0, 1fr) auto; |
| align-items: start; |
| gap: 12px; |
| padding: 10px 12px; |
| border-radius: var(--radius-md); |
| border: 1px dashed var(--border-strong); |
| background: var(--secondary); |
| } |
|
|
| .chat-queue__text { |
| color: var(--chat-text); |
| font-size: 13px; |
| line-height: 1.45; |
| white-space: pre-wrap; |
| overflow: hidden; |
| display: -webkit-box; |
| line-clamp: 3; |
| -webkit-line-clamp: 3; |
| -webkit-box-orient: vertical; |
| } |
|
|
| .chat-queue__remove { |
| align-self: start; |
| padding: 4px 10px; |
| font-size: 12px; |
| line-height: 1; |
| } |
|
|
| |
| .chat-new-messages { |
| align-self: center; |
| margin: 8px auto 0; |
| border-radius: 999px; |
| padding: 6px 12px; |
| font-size: 12px; |
| line-height: 1; |
| } |
|
|
| |
| .chat-line { |
| display: flex; |
| } |
|
|
| .chat-line.user { |
| justify-content: flex-end; |
| } |
|
|
| .chat-line.assistant, |
| .chat-line.other { |
| justify-content: flex-start; |
| } |
|
|
| .chat-msg { |
| display: grid; |
| gap: 6px; |
| max-width: min(700px, 82%); |
| } |
|
|
| .chat-line.user .chat-msg { |
| justify-items: end; |
| } |
|
|
| |
| .chat-bubble { |
| border: 1px solid transparent; |
| background: var(--card); |
| border-radius: var(--radius-lg); |
| padding: 10px 14px; |
| min-width: 0; |
| } |
|
|
| :root[data-theme-mode="light"] .chat-bubble { |
| border-color: var(--border); |
| background: var(--bg); |
| } |
|
|
| .chat-line.user .chat-bubble { |
| border-color: transparent; |
| background: var(--accent-subtle); |
| } |
|
|
| :root[data-theme-mode="light"] .chat-line.user .chat-bubble { |
| border-color: rgba(234, 88, 12, 0.2); |
| background: rgba(251, 146, 60, 0.12); |
| } |
|
|
| .chat-line.assistant .chat-bubble { |
| border-color: transparent; |
| background: var(--secondary); |
| } |
|
|
| :root[data-theme-mode="light"] .chat-line.assistant .chat-bubble { |
| border-color: var(--border); |
| background: var(--bg-muted); |
| } |
|
|
| @keyframes chatStreamPulse { |
| 0%, |
| 100% { |
| border-color: var(--border); |
| } |
| 50% { |
| border-color: var(--accent); |
| } |
| } |
|
|
| .chat-bubble.streaming { |
| animation: chatStreamPulse 1.5s ease-in-out infinite; |
| } |
|
|
| @media (prefers-reduced-motion: reduce) { |
| .chat-bubble.streaming { |
| animation: none; |
| border-color: var(--accent); |
| } |
| } |
|
|
| |
| .chat-bubble.chat-reading-indicator { |
| width: fit-content; |
| padding: 10px 16px; |
| } |
|
|
| .chat-reading-indicator__dots { |
| display: inline-flex; |
| align-items: center; |
| gap: 4px; |
| height: 12px; |
| } |
|
|
| .chat-reading-indicator__dots > span { |
| display: inline-block; |
| width: 6px; |
| height: 6px; |
| border-radius: var(--radius-full); |
| background: var(--muted); |
| opacity: 0.6; |
| transform: translateY(0); |
| animation: chatReadingDot 1.2s ease-in-out infinite; |
| will-change: transform, opacity; |
| } |
|
|
| .chat-reading-indicator__dots > span:nth-child(2) { |
| animation-delay: 0.15s; |
| } |
|
|
| .chat-reading-indicator__dots > span:nth-child(3) { |
| animation-delay: 0.3s; |
| } |
|
|
| @keyframes chatReadingDot { |
| 0%, |
| 80%, |
| 100% { |
| opacity: 0.4; |
| transform: translateY(0); |
| } |
| 40% { |
| opacity: 1; |
| transform: translateY(-3px); |
| } |
| } |
|
|
| @media (prefers-reduced-motion: reduce) { |
| .chat-reading-indicator__dots > span { |
| animation: none; |
| opacity: 0.6; |
| } |
| } |
|
|
| |
| .chat-text { |
| overflow-wrap: anywhere; |
| word-break: break-word; |
| color: var(--chat-text); |
| line-height: 1.5; |
| } |
|
|
| .chat-text :where(p, ul, ol, pre, blockquote, table) { |
| margin: 0; |
| } |
|
|
| .chat-text :where(p + p, p + ul, p + ol, p + pre, p + blockquote, p + table) { |
| margin-top: 0.75em; |
| } |
|
|
| .chat-text :where(ul, ol) { |
| padding-left: 1.2em; |
| } |
|
|
| .chat-text :where(li + li) { |
| margin-top: 0.25em; |
| } |
|
|
| .chat-text :where(a) { |
| color: var(--accent); |
| } |
|
|
| .chat-text :where(a:hover) { |
| text-decoration: underline; |
| } |
|
|
| .chat-text :where(blockquote) { |
| border-left: 2px solid var(--border-strong); |
| padding-left: 12px; |
| color: var(--muted); |
| } |
|
|
| .chat-text :where(hr) { |
| border: 0; |
| border-top: 1px solid var(--border); |
| margin: 1em 0; |
| } |
|
|
| .chat-text :where(code) { |
| font-family: var(--mono); |
| font-size: 0.9em; |
| } |
|
|
| .chat-text :where(:not(pre) > code) { |
| padding: 0.15em 0.35em; |
| border-radius: var(--radius-sm); |
| border: 1px solid var(--border); |
| background: var(--secondary); |
| } |
|
|
| :root[data-theme-mode="light"] .chat-text :where(:not(pre) > code) { |
| background: var(--bg-muted); |
| } |
|
|
| .chat-text :where(pre) { |
| margin-top: 0.75em; |
| padding: 10px 12px; |
| border-radius: var(--radius-md); |
| border: 1px solid var(--border); |
| background: var(--secondary); |
| overflow: auto; |
| } |
|
|
| :root[data-theme-mode="light"] .chat-text :where(pre) { |
| background: var(--bg-muted); |
| } |
|
|
| .chat-text :where(pre code) { |
| font-size: 12px; |
| white-space: pre; |
| } |
|
|
| .chat-text :where(table) { |
| margin-top: 0.75em; |
| border-collapse: collapse; |
| width: 100%; |
| max-width: 100%; |
| font-size: 13px; |
| display: block; |
| overflow-x: auto; |
| } |
|
|
| .chat-text :where(th, td) { |
| border: 1px solid var(--border); |
| padding: 6px 10px; |
| vertical-align: top; |
| } |
|
|
| .chat-text :where(th) { |
| font-family: var(--mono); |
| font-weight: 500; |
| color: var(--muted); |
| background: var(--secondary); |
| } |
|
|
| |
| .chat-tool-card { |
| margin-top: 8px; |
| padding: 10px 12px; |
| border-radius: var(--radius-md); |
| border: 1px solid var(--border); |
| background: var(--secondary); |
| display: grid; |
| gap: 4px; |
| } |
|
|
| :root[data-theme-mode="light"] .chat-tool-card { |
| background: var(--bg-muted); |
| } |
|
|
| .chat-tool-card__title { |
| font-family: var(--mono); |
| font-size: 12px; |
| font-weight: 500; |
| color: var(--text); |
| } |
|
|
| .chat-tool-card__detail { |
| font-family: var(--mono); |
| font-size: 11px; |
| color: var(--muted); |
| } |
|
|
| .chat-tool-card__details { |
| margin-top: 6px; |
| } |
|
|
| .chat-tool-card__summary { |
| font-family: var(--mono); |
| font-size: 11px; |
| color: var(--muted); |
| cursor: pointer; |
| list-style: none; |
| display: inline-flex; |
| align-items: center; |
| gap: 6px; |
| } |
|
|
| .chat-tool-card__summary::-webkit-details-marker { |
| display: none; |
| } |
|
|
| .chat-tool-card__summary-meta { |
| color: var(--muted); |
| opacity: 0.7; |
| } |
|
|
| .chat-tool-card__details[open] .chat-tool-card__summary { |
| color: var(--text); |
| } |
|
|
| .chat-tool-card__output { |
| margin-top: 8px; |
| font-family: var(--mono); |
| font-size: 11px; |
| line-height: 1.5; |
| white-space: pre-wrap; |
| color: var(--chat-text); |
| padding: 8px 10px; |
| border-radius: var(--radius-md); |
| border: 1px solid var(--border); |
| background: var(--card); |
| } |
|
|
| :root[data-theme-mode="light"] .chat-tool-card__output { |
| background: var(--bg); |
| } |
|
|
| .chat-stamp { |
| font-size: 11px; |
| color: var(--muted); |
| } |
|
|
| .chat-line.user .chat-stamp { |
| text-align: right; |
| } |
|
|
| |
| .chat-compose { |
| margin-top: 12px; |
| display: flex; |
| flex-direction: column; |
| gap: 10px; |
| } |
|
|
| .shell--chat .chat-compose { |
| position: sticky; |
| bottom: 0; |
| z-index: 5; |
| margin-top: 0; |
| padding-top: 12px; |
| background: linear-gradient(180deg, transparent 0%, var(--bg) 40%); |
| } |
|
|
| .shell--chat-focus .chat-compose { |
| bottom: calc(var(--shell-pad) + 8px); |
| padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); |
| border-bottom-left-radius: var(--radius-lg); |
| border-bottom-right-radius: var(--radius-lg); |
| } |
|
|
| .chat-compose__field { |
| gap: 4px; |
| } |
|
|
| .chat-compose__field textarea { |
| min-height: 72px; |
| padding: 10px 14px; |
| border-radius: var(--radius-lg); |
| resize: vertical; |
| white-space: pre-wrap; |
| font-family: var(--font-body); |
| line-height: 1.5; |
| border: 1px solid var(--input); |
| background: var(--card); |
| box-shadow: inset 0 1px 0 var(--card-highlight); |
| transition: |
| border-color var(--duration-fast) ease, |
| box-shadow var(--duration-fast) ease; |
| } |
|
|
| .chat-compose__field textarea:focus { |
| border-color: var(--ring); |
| box-shadow: var(--focus-ring); |
| } |
|
|
| .chat-compose__field textarea:disabled { |
| opacity: 0.5; |
| cursor: not-allowed; |
| } |
|
|
| .chat-compose__actions { |
| justify-content: flex-end; |
| align-self: end; |
| } |
|
|
| @media (max-width: 900px) { |
| .chat-session { |
| min-width: 180px; |
| } |
|
|
| .chat-compose { |
| grid-template-columns: 1fr; |
| } |
| } |
|
|
| |
| |
| |
|
|
| .qr-wrap { |
| margin-top: 16px; |
| border-radius: var(--radius-md); |
| background: var(--card); |
| border: 1px dashed var(--border-strong); |
| padding: 16px; |
| display: inline-flex; |
| } |
|
|
| .qr-wrap img { |
| width: 160px; |
| height: 160px; |
| border-radius: var(--radius-sm); |
| image-rendering: pixelated; |
| } |
|
|
| |
| |
| |
|
|
| .exec-approval-overlay { |
| position: fixed; |
| inset: 0; |
| background: rgba(0, 0, 0, 0.8); |
| backdrop-filter: blur(4px); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| padding: 24px; |
| z-index: 200; |
| } |
|
|
| .exec-approval-card { |
| width: min(540px, 100%); |
| background: var(--card); |
| border: 1px solid var(--border); |
| border-radius: var(--radius-lg); |
| padding: 20px; |
| animation: scale-in 0.2s var(--ease-out); |
| } |
|
|
| .exec-approval-header { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 16px; |
| } |
|
|
| .exec-approval-title { |
| font-size: 14px; |
| font-weight: 600; |
| } |
|
|
| .exec-approval-sub { |
| color: var(--muted); |
| font-size: 13px; |
| margin-top: 4px; |
| } |
|
|
| .exec-approval-queue { |
| font-size: 11px; |
| font-weight: 500; |
| color: var(--muted); |
| border: 1px solid var(--border); |
| border-radius: var(--radius-full); |
| padding: 4px 10px; |
| } |
|
|
| .exec-approval-command { |
| margin-top: 12px; |
| padding: 10px 12px; |
| background: var(--secondary); |
| border: 1px solid var(--border); |
| border-radius: var(--radius-md); |
| word-break: break-word; |
| white-space: pre-wrap; |
| font-family: var(--mono); |
| font-size: 13px; |
| } |
|
|
| .exec-approval-meta { |
| margin-top: 12px; |
| display: grid; |
| gap: 6px; |
| font-size: 13px; |
| color: var(--muted); |
| } |
|
|
| .exec-approval-meta-row { |
| display: flex; |
| justify-content: space-between; |
| gap: 12px; |
| } |
|
|
| .exec-approval-meta-row span:last-child { |
| color: var(--text); |
| font-family: var(--mono); |
| } |
|
|
| .exec-approval-error { |
| margin-top: 10px; |
| font-size: 13px; |
| color: var(--danger); |
| } |
|
|
| .exec-approval-actions { |
| margin-top: 16px; |
| display: flex; |
| flex-wrap: wrap; |
| gap: 8px; |
| } |
|
|
| |
| |
| |
|
|
| .agents-layout { |
| display: grid; |
| grid-template-columns: 1fr; |
| gap: 14px; |
| } |
|
|
| .agents-sidebar { |
| display: grid; |
| gap: 12px; |
| align-self: start; |
| } |
|
|
| .agents-toolbar { |
| display: flex; |
| align-items: center; |
| gap: 12px; |
| flex-wrap: wrap; |
| } |
|
|
| .agents-toolbar-row { |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| flex: 1; |
| min-width: 0; |
| } |
|
|
| .agents-toolbar-label { |
| font-size: 12px; |
| font-weight: 600; |
| color: var(--muted); |
| text-transform: uppercase; |
| letter-spacing: 0.04em; |
| flex-shrink: 0; |
| } |
|
|
| .agents-control-row { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| flex: 1; |
| min-width: 0; |
| } |
|
|
| .agents-control-select { |
| flex: 1; |
| min-width: 0; |
| max-width: 280px; |
| } |
|
|
| .agents-select { |
| width: 100%; |
| padding: 7px 32px 7px 10px; |
| border: 1px solid var(--border-strong); |
| border-radius: var(--radius-md); |
| background-color: var(--bg-accent); |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); |
| background-repeat: no-repeat; |
| background-position: right 8px center; |
| font-size: 13px; |
| font-weight: 500; |
| cursor: pointer; |
| outline: none; |
| appearance: none; |
| transition: |
| border-color var(--duration-fast) ease, |
| box-shadow var(--duration-fast) ease; |
| } |
|
|
| :root[data-theme-mode="light"] .agents-select { |
| background-color: white; |
| } |
|
|
| .agents-select:focus { |
| border-color: var(--accent); |
| box-shadow: var(--focus-ring); |
| } |
|
|
| .agents-control-actions { |
| display: flex; |
| align-items: center; |
| gap: 6px; |
| flex-shrink: 0; |
| } |
|
|
| .agents-refresh-btn { |
| white-space: nowrap; |
| } |
|
|
| .agent-actions-wrap { |
| position: relative; |
| } |
|
|
| .agent-actions-toggle { |
| width: 28px; |
| height: 28px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| border: 1px solid var(--border); |
| border-radius: var(--radius-sm); |
| background: var(--bg-elevated); |
| color: var(--muted); |
| font-size: 14px; |
| cursor: pointer; |
| transition: |
| background var(--duration-fast) ease, |
| border-color var(--duration-fast) ease; |
| } |
|
|
| .agent-actions-toggle:hover { |
| background: var(--bg-hover); |
| border-color: var(--border-strong); |
| } |
|
|
| .agent-actions-menu { |
| position: absolute; |
| top: calc(100% + 4px); |
| right: 0; |
| z-index: 10; |
| min-width: 160px; |
| padding: 4px; |
| border: 1px solid var(--border); |
| border-radius: var(--radius-md); |
| background: var(--bg-elevated); |
| box-shadow: var(--shadow-md); |
| display: grid; |
| gap: 1px; |
| } |
|
|
| .agent-actions-menu button { |
| display: block; |
| width: 100%; |
| padding: 7px 10px; |
| border: none; |
| border-radius: var(--radius-sm); |
| background: transparent; |
| color: var(--text); |
| font-size: 12px; |
| text-align: left; |
| cursor: pointer; |
| transition: background var(--duration-fast) ease; |
| } |
|
|
| .agent-actions-menu button:hover:not(:disabled) { |
| background: var(--bg-hover); |
| } |
|
|
| .agent-actions-menu button:disabled { |
| color: var(--muted); |
| cursor: not-allowed; |
| opacity: 0.5; |
| } |
|
|
| .agents-main { |
| display: grid; |
| gap: 14px; |
| } |
|
|
| .agent-list { |
| display: grid; |
| gap: 8px; |
| } |
|
|
| .agent-row { |
| display: grid; |
| grid-template-columns: auto minmax(0, 1fr) auto; |
| align-items: center; |
| gap: 10px; |
| width: 100%; |
| text-align: left; |
| border: 1px solid var(--border); |
| border-radius: var(--radius-md); |
| background: var(--card); |
| padding: 8px 12px; |
| cursor: pointer; |
| transition: border-color var(--duration-fast) ease; |
| } |
|
|
| .agent-row:hover { |
| border-color: var(--border-strong); |
| } |
|
|
| .agent-row.active { |
| border-color: var(--accent); |
| box-shadow: var(--focus-ring); |
| } |
|
|
| .agent-avatar { |
| width: 32px; |
| height: 32px; |
| border-radius: 50%; |
| background: var(--secondary); |
| display: grid; |
| place-items: center; |
| font-weight: 600; |
| } |
|
|
| .agent-avatar--lg { |
| width: 48px; |
| height: 48px; |
| font-size: 20px; |
| } |
|
|
| .agent-info { |
| display: grid; |
| gap: 2px; |
| min-width: 0; |
| } |
|
|
| .agent-title { |
| font-weight: 600; |
| } |
|
|
| .agent-sub { |
| color: var(--muted); |
| font-size: 12px; |
| } |
|
|
| .agent-pill { |
| border: 1px solid var(--border); |
| border-radius: var(--radius-full); |
| padding: 4px 10px; |
| font-size: 11px; |
| color: var(--muted); |
| background: var(--secondary); |
| text-transform: uppercase; |
| letter-spacing: 0.04em; |
| } |
|
|
| .agent-pill.warn { |
| color: var(--warn); |
| border-color: var(--warn); |
| } |
|
|
| .agent-header { |
| display: grid; |
| grid-template-columns: minmax(0, 1fr) auto; |
| gap: 12px; |
| align-items: center; |
| } |
|
|
| .agent-header-main { |
| display: flex; |
| gap: 12px; |
| align-items: center; |
| } |
|
|
| .agent-header-meta { |
| display: grid; |
| justify-items: end; |
| gap: 6px; |
| color: var(--muted); |
| } |
|
|
| .agent-tabs { |
| display: flex; |
| gap: 6px; |
| flex-wrap: wrap; |
| padding-bottom: 2px; |
| border-bottom: 1px solid var(--border); |
| } |
|
|
| .agent-tab { |
| border: 1px solid transparent; |
| border-radius: var(--radius-sm); |
| padding: 6px 12px; |
| font-size: 12px; |
| font-weight: 600; |
| color: var(--muted); |
| background: transparent; |
| cursor: pointer; |
| transition: |
| border-color var(--duration-fast) ease, |
| background var(--duration-fast) ease, |
| color var(--duration-fast) ease; |
| } |
|
|
| .agent-tab:hover { |
| color: var(--text); |
| background: var(--bg-hover); |
| } |
|
|
| .agent-tab.active { |
| background: var(--accent-subtle); |
| border-color: color-mix(in srgb, var(--accent) 25%, transparent); |
| color: var(--accent); |
| } |
|
|
| .agent-tab-count { |
| margin-left: 4px; |
| font-size: 10px; |
| font-weight: 700; |
| opacity: 0.7; |
| } |
|
|
| .agents-overview-grid { |
| display: grid; |
| gap: 12px; |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); |
| } |
|
|
| .agent-kv { |
| display: grid; |
| gap: 6px; |
| min-width: 0; |
| } |
|
|
| .agent-kv > div { |
| min-width: 0; |
| overflow-wrap: anywhere; |
| word-break: break-word; |
| } |
|
|
| .agent-kv-sub { |
| font-size: 12px; |
| } |
|
|
| .agent-model-select { |
| display: grid; |
| gap: 10px; |
| } |
|
|
| .agent-model-fields { |
| display: grid; |
| gap: 10px; |
| } |
|
|
| .workspace-link { |
| display: inline-flex; |
| align-items: center; |
| gap: 4px; |
| border: none; |
| background: transparent; |
| color: var(--accent); |
| font-family: var(--mono); |
| font-size: 12px; |
| padding: 2px 0; |
| cursor: pointer; |
| word-break: break-all; |
| text-align: left; |
| transition: opacity var(--duration-fast) ease; |
| } |
|
|
| .workspace-link:hover { |
| opacity: 0.75; |
| text-decoration: underline; |
| } |
|
|
| .agent-model-actions { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| flex-wrap: wrap; |
| } |
|
|
| .agent-chip-input { |
| display: flex; |
| flex-wrap: wrap; |
| align-items: center; |
| gap: 6px; |
| padding: 6px 10px; |
| border: 1px solid var(--border-strong); |
| border-radius: var(--radius-md); |
| background: var(--bg-accent); |
| min-height: 38px; |
| cursor: text; |
| transition: border-color var(--duration-fast) ease; |
| } |
|
|
| .agent-chip-input:focus-within { |
| border-color: var(--accent); |
| box-shadow: var(--focus-ring); |
| } |
|
|
| .agent-chip-input input { |
| flex: 1; |
| min-width: 120px; |
| border: none; |
| background: transparent; |
| outline: none; |
| font-size: 13px; |
| padding: 0; |
| } |
|
|
| .agent-model-meta { |
| display: grid; |
| gap: 6px; |
| min-width: 200px; |
| } |
|
|
| .agent-files-grid { |
| display: grid; |
| grid-template-columns: minmax(180px, 240px) minmax(0, 1fr); |
| gap: 14px; |
| } |
|
|
| .agent-files-list { |
| display: grid; |
| gap: 8px; |
| } |
|
|
| .agent-file-row { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| gap: 12px; |
| width: 100%; |
| text-align: left; |
| border: 1px solid var(--border); |
| border-radius: var(--radius-md); |
| background: var(--card); |
| padding: 10px 12px; |
| cursor: pointer; |
| transition: border-color var(--duration-fast) ease; |
| } |
|
|
| .agent-file-row:hover { |
| border-color: var(--border-strong); |
| } |
|
|
| .agent-file-row.active { |
| border-color: var(--accent); |
| box-shadow: var(--focus-ring); |
| } |
|
|
| .agent-file-name { |
| font-weight: 600; |
| } |
|
|
| .agent-file-meta { |
| color: var(--muted); |
| font-size: 12px; |
| margin-top: 4px; |
| } |
|
|
| .agent-files-editor { |
| border: 1px solid var(--border); |
| border-radius: var(--radius-lg); |
| padding: 16px; |
| background: var(--card); |
| } |
|
|
| .agent-file-field { |
| min-height: clamp(320px, 56vh, 720px); |
| } |
|
|
| .field textarea.agent-file-textarea { |
| min-height: clamp(320px, 56vh, 720px); |
| transition: filter var(--duration-fast) ease; |
| } |
|
|
| .field textarea.agent-file-textarea:not(:focus) { |
| filter: blur(6px); |
| } |
|
|
| .agent-file-header { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| gap: 12px; |
| flex-wrap: wrap; |
| } |
|
|
| .agent-file-title { |
| font-weight: 600; |
| } |
|
|
| .agent-file-sub { |
| color: var(--muted); |
| font-size: 12px; |
| margin-top: 4px; |
| } |
|
|
| .agent-file-actions { |
| display: flex; |
| gap: 8px; |
| } |
|
|
| .agent-tools-meta { |
| display: grid; |
| gap: 12px; |
| grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); |
| } |
|
|
| .agent-tools-buttons { |
| display: flex; |
| gap: 8px; |
| flex-wrap: wrap; |
| margin-top: 8px; |
| } |
|
|
| .agent-tools-grid { |
| display: grid; |
| gap: 16px; |
| } |
|
|
| .agent-tools-section { |
| border: 1px solid var(--border); |
| border-radius: var(--radius-md); |
| padding: 10px; |
| background: var(--bg-elevated); |
| } |
|
|
| .agent-tools-header { |
| font-weight: 600; |
| margin-bottom: 10px; |
| } |
|
|
| .agent-tools-list { |
| display: grid; |
| gap: 8px 12px; |
| grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); |
| } |
|
|
| .agent-tool-row { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| gap: 12px; |
| padding: 6px 8px; |
| border: 1px solid var(--border); |
| border-radius: var(--radius-md); |
| background: var(--card); |
| } |
|
|
| .agent-tool-title { |
| font-weight: 600; |
| font-size: 13px; |
| } |
|
|
| .agent-tool-sub { |
| color: var(--muted); |
| font-size: 11px; |
| margin-top: 2px; |
| } |
|
|
| .agent-skills-groups { |
| display: grid; |
| gap: 16px; |
| } |
|
|
| .agent-skills-group { |
| display: grid; |
| gap: 10px; |
| } |
|
|
| .agent-skills-group summary { |
| list-style: none; |
| } |
|
|
| .agent-skills-header { |
| display: flex; |
| align-items: center; |
| font-weight: 600; |
| font-size: 13px; |
| text-transform: uppercase; |
| letter-spacing: 0.04em; |
| color: var(--muted); |
| cursor: pointer; |
| gap: 8px; |
| } |
|
|
| .agent-skills-header > span:last-child { |
| margin-left: auto; |
| } |
|
|
| .agent-skills-group summary::-webkit-details-marker { |
| display: none; |
| } |
|
|
| .agent-skills-group summary::marker { |
| content: ""; |
| } |
|
|
| .agent-skills-header::after { |
| content: "▸"; |
| font-size: 12px; |
| color: var(--muted); |
| transition: transform var(--duration-fast) ease; |
| margin-left: 8px; |
| } |
|
|
| .agent-skills-group[open] .agent-skills-header::after { |
| transform: rotate(90deg); |
| } |
|
|
| .agent-skill-row { |
| align-items: flex-start; |
| gap: 18px; |
| } |
|
|
| .agent-skill-row .list-meta { |
| display: flex; |
| align-items: flex-start; |
| justify-content: flex-end; |
| min-width: auto; |
| } |
|
|
| .skills-grid { |
| grid-template-columns: 1fr; |
| } |
|
|
| @container (min-width: 900px) { |
| .skills-grid { |
| grid-template-columns: repeat(2, minmax(0, 1fr)); |
| } |
| } |
|
|
| @media (max-width: 980px) { |
| .agent-header { |
| grid-template-columns: 1fr; |
| } |
|
|
| .agent-header-meta { |
| justify-items: start; |
| } |
|
|
| .agent-files-grid { |
| grid-template-columns: 1fr; |
| } |
|
|
| .agent-tools-list { |
| grid-template-columns: 1fr; |
| } |
| } |
|
|
| @media (max-width: 600px) { |
| .agents-toolbar-row { |
| flex-direction: column; |
| align-items: stretch; |
| gap: 6px; |
| } |
|
|
| .agents-control-select { |
| max-width: none; |
| } |
|
|
| .agents-toolbar-label { |
| display: none; |
| } |
| } |
|
|
| .cmd-palette-overlay { |
| position: fixed; |
| inset: 0; |
| z-index: 1000; |
| display: flex; |
| align-items: flex-start; |
| justify-content: center; |
| padding-top: min(20vh, 160px); |
| background: rgba(0, 0, 0, 0.5); |
| animation: fade-in 0.12s ease-out; |
| } |
|
|
| .cmd-palette { |
| width: min(560px, 90vw); |
| overflow: hidden; |
| background: var(--card); |
| border: 1px solid var(--border); |
| border-radius: var(--radius-lg); |
| box-shadow: var(--shadow-lg); |
| animation: scale-in 0.15s ease-out; |
| } |
|
|
| .cmd-palette__input { |
| width: 100%; |
| padding: 14px 18px; |
| background: transparent; |
| border: none; |
| border-bottom: 1px solid var(--border); |
| color: var(--text); |
| font-size: 15px; |
| outline: none; |
| } |
|
|
| .cmd-palette__input::placeholder { |
| color: var(--muted); |
| } |
|
|
| .cmd-palette__results { |
| max-height: 320px; |
| overflow-y: auto; |
| padding: 6px 0; |
| } |
|
|
| .cmd-palette__group-label { |
| padding: 8px 18px 4px; |
| color: var(--muted); |
| font-size: 11px; |
| font-weight: 600; |
| text-transform: uppercase; |
| letter-spacing: 0.05em; |
| } |
|
|
| .cmd-palette__item { |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| padding: 8px 18px; |
| font-size: 14px; |
| cursor: pointer; |
| transition: background var(--duration-fast) ease; |
| } |
|
|
| .cmd-palette__item:hover, |
| .cmd-palette__item--active { |
| background: var(--bg-hover); |
| } |
|
|
| .cmd-palette__item .nav-item__icon { |
| width: 16px; |
| height: 16px; |
| flex-shrink: 0; |
| } |
|
|
| .cmd-palette__item .nav-item__icon svg { |
| width: 100%; |
| height: 100%; |
| } |
|
|
| .cmd-palette__item-desc { |
| margin-left: auto; |
| font-size: 12px; |
| } |
|
|
| .cmd-palette__empty { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| padding: 16px 18px; |
| color: var(--muted); |
| font-size: 13px; |
| } |
|
|
| .cmd-palette__footer { |
| display: flex; |
| align-items: center; |
| justify-content: flex-end; |
| gap: 12px; |
| padding: 8px 18px; |
| border-top: 1px solid var(--border); |
| font-size: 11px; |
| color: var(--muted); |
| } |
|
|
| .cmd-palette__footer kbd { |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| padding: 1px 5px; |
| border: 1px solid var(--border); |
| border-radius: var(--radius-sm); |
| background: var(--bg); |
| font-family: var(--mono); |
| font-size: 10px; |
| line-height: 1.4; |
| } |
|
|
| |
| |
| |
|
|
| .ov-cards { |
| display: grid; |
| gap: 12px; |
| grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); |
| } |
|
|
| .ov-card { |
| display: grid; |
| gap: 6px; |
| padding: 16px; |
| border: 1px solid var(--border); |
| border-radius: var(--radius-lg); |
| background: var(--card); |
| cursor: pointer; |
| text-align: left; |
| transition: |
| border-color var(--duration-normal) var(--ease-out), |
| box-shadow var(--duration-normal) var(--ease-out), |
| transform var(--duration-fast) var(--ease-out); |
| animation: rise 0.25s var(--ease-out) backwards; |
| } |
|
|
| .ov-card:hover { |
| border-color: var(--border-strong); |
| box-shadow: var(--shadow-sm); |
| transform: translateY(-1px); |
| } |
|
|
| .ov-card:focus-visible { |
| outline: none; |
| box-shadow: var(--focus-ring); |
| } |
|
|
| .ov-card__label { |
| font-size: 11px; |
| font-weight: 600; |
| color: var(--muted); |
| text-transform: uppercase; |
| letter-spacing: 0.04em; |
| } |
|
|
| .ov-card__value { |
| font-size: 22px; |
| font-weight: 700; |
| letter-spacing: -0.03em; |
| line-height: 1.15; |
| color: var(--text-strong); |
| } |
|
|
| .ov-card__hint { |
| font-size: 12px; |
| color: var(--muted); |
| line-height: 1.35; |
| } |
|
|
| .ov-card__hint .danger { |
| color: var(--danger); |
| } |
|
|
| |
| .ov-cards .ov-card:nth-child(1) { |
| animation-delay: 0ms; |
| } |
| .ov-cards .ov-card:nth-child(2) { |
| animation-delay: 50ms; |
| } |
| .ov-cards .ov-card:nth-child(3) { |
| animation-delay: 100ms; |
| } |
| .ov-cards .ov-card:nth-child(4) { |
| animation-delay: 150ms; |
| } |
|
|
| |
| .ov-attention-list { |
| display: flex; |
| flex-direction: column; |
| gap: 8px; |
| } |
|
|
| .ov-attention-item { |
| display: flex; |
| align-items: flex-start; |
| gap: 10px; |
| padding: 10px 12px; |
| border-radius: var(--radius-md); |
| background: var(--bg-hover); |
| border: 1px solid var(--border); |
| } |
|
|
| .ov-attention-item.warn { |
| border-color: var(--warning-subtle, rgba(234, 179, 8, 0.2)); |
| background: rgba(234, 179, 8, 0.05); |
| } |
|
|
| .ov-attention-item.danger { |
| border-color: var(--danger-subtle, rgba(239, 68, 68, 0.2)); |
| background: rgba(239, 68, 68, 0.05); |
| } |
|
|
| .ov-attention-icon { |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| flex-shrink: 0; |
| width: 18px; |
| height: 18px; |
| color: var(--muted); |
| margin-top: 1px; |
| } |
|
|
| .ov-attention-item.warn .ov-attention-icon { |
| color: var(--warning, #eab308); |
| } |
|
|
| .ov-attention-item.danger .ov-attention-icon { |
| color: var(--danger, #ef4444); |
| } |
|
|
| .ov-attention-icon svg { |
| width: 16px; |
| height: 16px; |
| fill: none; |
| stroke: currentColor; |
| stroke-width: 2; |
| stroke-linecap: round; |
| stroke-linejoin: round; |
| } |
|
|
| .ov-attention-body { |
| flex: 1; |
| min-width: 0; |
| } |
|
|
| .ov-attention-title { |
| font-size: 13px; |
| font-weight: 500; |
| } |
|
|
| .ov-attention-link { |
| font-size: 12px; |
| color: var(--accent, #3b82f6); |
| text-decoration: none; |
| } |
|
|
| .ov-attention-link:hover { |
| text-decoration: underline; |
| } |
|
|
| |
| .ov-recent { |
| margin-top: 18px; |
| } |
|
|
| .ov-recent__title { |
| font-size: 13px; |
| font-weight: 600; |
| color: var(--muted); |
| text-transform: uppercase; |
| letter-spacing: 0.04em; |
| margin: 0 0 10px; |
| } |
|
|
| .ov-recent__list { |
| list-style: none; |
| margin: 0; |
| padding: 0; |
| display: grid; |
| gap: 6px; |
| } |
|
|
| .ov-recent__row { |
| display: grid; |
| grid-template-columns: minmax(0, 1fr) auto auto; |
| gap: 12px; |
| padding: 8px 12px; |
| border: 1px solid var(--border); |
| border-radius: var(--radius-md); |
| background: var(--card); |
| font-size: 13px; |
| align-items: center; |
| transition: border-color var(--duration-fast) ease; |
| } |
|
|
| .ov-recent__row:hover { |
| border-color: var(--border-strong); |
| } |
|
|
| .ov-recent__key { |
| font-weight: 500; |
| white-space: nowrap; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| min-width: 0; |
| } |
|
|
| .ov-recent__model { |
| color: var(--muted); |
| font-size: 12px; |
| font-family: var(--mono); |
| } |
|
|
| .ov-recent__time { |
| color: var(--muted); |
| font-size: 12px; |
| white-space: nowrap; |
| } |
|
|
| .blur-digits { |
| filter: blur(4px); |
| user-select: none; |
| } |
|
|
| |
| .ov-section-divider { |
| border-top: 1px solid var(--border); |
| margin: 18px 0 0; |
| } |
|
|
| |
| .ov-access-grid { |
| display: grid; |
| gap: 12px; |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); |
| } |
|
|
| .ov-access-grid__full { |
| grid-column: 1 / -1; |
| } |
|
|
| |
| .ov-bottom-grid { |
| display: grid; |
| gap: 20px; |
| grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); |
| } |
|
|
| @media (max-width: 600px) { |
| .ov-cards { |
| grid-template-columns: repeat(2, 1fr); |
| gap: 8px; |
| } |
|
|
| .ov-card { |
| padding: 12px; |
| } |
|
|
| .ov-card__value { |
| font-size: 18px; |
| } |
|
|
| .ov-bottom-grid { |
| grid-template-columns: 1fr; |
| } |
|
|
| .ov-access-grid { |
| grid-template-columns: 1fr; |
| } |
|
|
| .ov-recent__row { |
| grid-template-columns: 1fr; |
| gap: 4px; |
| } |
| } |
|
|
