| |
| @media (max-width: 640px) { |
|
|
| |
| .form-row-flex { |
| flex-direction: column !important; |
| } |
|
|
| .form-row-flex>div { |
| width: 100% !important; |
| } |
| } |
|
|
| |
| .form-row-flex { |
| display: flex; |
| gap: 12px; |
| align-items: flex-start; |
| } |
|
|
| |
| #channelTypeRadios label, |
| #keyStrategyRadios label { |
| transition: all 0.2s ease; |
| padding: 4px 4px; |
| border-radius: 6px; |
| } |
|
|
| #channelTypeRadios label:hover, |
| #keyStrategyRadios label:hover { |
| background-color: var(--neutral-100); |
| } |
|
|
| #channelTypeRadios label:has(input:checked), |
| #keyStrategyRadios label:has(input:checked) { |
| color: var(--primary-700); |
| font-weight: 500; |
| } |
|
|
| |
| @keyframes slideIn { |
| from { |
| transform: translateX(400px); |
| opacity: 0; |
| } |
|
|
| to { |
| transform: translateX(0); |
| opacity: 1; |
| } |
| } |
|
|
| @keyframes slideOut { |
| from { |
| transform: translateX(0); |
| opacity: 1; |
| } |
|
|
| to { |
| transform: translateX(400px); |
| opacity: 0; |
| } |
| } |
|
|
| |
| .channel-stat-badge { |
| display: inline-flex; |
| align-items: center; |
| gap: 4px; |
| padding: 4px 8px; |
| border-radius: 8px; |
| background: var(--neutral-100); |
| border: 1px solid var(--neutral-200); |
| font-size: 12px; |
| color: var(--neutral-700); |
| line-height: 1.3; |
| } |
|
|
| .channel-stat-badge strong { |
| color: var(--neutral-900); |
| } |
|
|
| .content-area > header .glass-card, |
| .filter-bar { |
| background: rgba(255, 255, 255, 0.97); |
| border-color: rgba(148, 163, 184, 0.18); |
| box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04); |
| } |
|
|
| .page-subtitle { |
| color: var(--neutral-700); |
| line-height: 1.6; |
| font-weight: 500; |
| } |
|
|
| .page-subtitle b { |
| color: var(--neutral-900); |
| font-weight: 700; |
| } |
|
|
| .channel-page-hero { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 16px; |
| flex-wrap: wrap; |
| } |
|
|
| .channel-page-actions { |
| display: flex; |
| align-items: center; |
| gap: 12px; |
| flex-wrap: wrap; |
| } |
|
|
| .channel-page-action-btn { |
| padding: 8px 16px; |
| font-size: 14px; |
| } |
|
|
| .channel-filter-action-btn { |
| padding: 8px 16px; |
| font-size: 14px; |
| } |
|
|
| .channel-search-control { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| width: 100%; |
| min-width: 0; |
| } |
|
|
| .channel-search-control .filter-combobox-wrapper { |
| flex: 1 1 auto; |
| min-width: 0; |
| } |
|
|
| .channel-editor-modal { |
| width: 90vw; |
| max-width: 90vw; |
| height: 90vh; |
| max-height: 90vh; |
| padding: 14px 20px; |
| display: flex; |
| flex-direction: column; |
| overflow: hidden; |
| } |
|
|
| .channel-editor-form { |
| display: flex; |
| flex-direction: column; |
| gap: 4px; |
| flex: 1 1 auto; |
| min-height: 0; |
| overflow: visible; |
| } |
|
|
| .channel-editor-body { |
| display: flex; |
| flex-direction: column; |
| gap: 4px; |
| flex: 1 1 auto; |
| min-height: 0; |
| overflow-y: auto; |
| overflow-x: hidden; |
| scrollbar-gutter: auto; |
| } |
|
|
| #channelModal .channel-editor-body, |
| #channelModal .inline-table-container { |
| scrollbar-width: thin; |
| scrollbar-color: rgba(100, 116, 139, 0.45) transparent; |
| } |
|
|
| #channelModal .channel-editor-body::-webkit-scrollbar, |
| #channelModal .inline-table-container::-webkit-scrollbar { |
| width: 6px; |
| height: 6px; |
| } |
|
|
| #channelModal .channel-editor-body::-webkit-scrollbar-track, |
| #channelModal .inline-table-container::-webkit-scrollbar-track { |
| background: transparent; |
| } |
|
|
| #channelModal .channel-editor-body::-webkit-scrollbar-thumb, |
| #channelModal .inline-table-container::-webkit-scrollbar-thumb { |
| background: rgba(100, 116, 139, 0.35); |
| border-radius: 999px; |
| } |
|
|
| #channelModal .channel-editor-body::-webkit-scrollbar-thumb:hover, |
| #channelModal .inline-table-container::-webkit-scrollbar-thumb:hover { |
| background: rgba(100, 116, 139, 0.55); |
| } |
|
|
| #channelModal .channel-editor-body::-webkit-scrollbar-button, |
| #channelModal .inline-table-container::-webkit-scrollbar-button { |
| display: none; |
| width: 0; |
| height: 0; |
| } |
|
|
| .channel-editor-group { |
| margin: 0; |
| } |
|
|
| .channel-editor-group--primary { |
| display: grid; |
| grid-template-columns: minmax(0, 1fr) minmax(320px, max-content); |
| column-gap: 20px; |
| row-gap: 2px; |
| align-items: start; |
| } |
|
|
| .channel-editor-group--primary .channel-editor-primary-row { |
| display: contents; |
| } |
|
|
| .channel-editor-primary-field { |
| display: flex; |
| align-items: center; |
| gap: 6px; |
| min-width: 0; |
| } |
|
|
| .channel-editor-primary-field--name, |
| .channel-editor-primary-field--type { |
| align-self: center; |
| } |
|
|
| .channel-editor-primary-field--type, |
| .channel-editor-primary-field--mode { |
| justify-content: flex-start; |
| } |
|
|
| .channel-editor-primary-field--transforms { |
| flex-direction: column; |
| align-items: flex-start; |
| gap: 4px; |
| } |
|
|
| .channel-editor-inline-group { |
| display: inline-flex; |
| align-items: center; |
| gap: 6px; |
| min-width: 0; |
| } |
|
|
| .channel-editor-primary-field--name .channel-editor-input { |
| flex: 1 1 auto; |
| min-width: 0; |
| } |
|
|
| .channel-editor-inline-label { |
| display: inline-flex; |
| align-items: center; |
| margin: 0; |
| white-space: nowrap; |
| } |
|
|
| .channel-editor-inline-label--muted { |
| font-size: 13px; |
| color: var(--neutral-700); |
| font-weight: 600; |
| } |
|
|
| .channel-editor-radio-group { |
| display: flex; |
| align-items: center; |
| gap: 5px; |
| flex-wrap: wrap; |
| min-width: 0; |
| } |
|
|
| .channel-editor-radio-option { |
| display: inline-flex; |
| align-items: center; |
| gap: 4px; |
| cursor: pointer; |
| font-size: 13px; |
| min-width: 0; |
| } |
|
|
| .channel-editor-radio-option-copy { |
| min-width: 0; |
| } |
|
|
| .channel-editor-radio-option-copy--with-hint { |
| display: inline-flex; |
| align-items: baseline; |
| gap: 4px; |
| flex-wrap: wrap; |
| } |
|
|
| .channel-editor-radio-option-text { |
| white-space: nowrap; |
| } |
|
|
| .channel-editor-radio-hint { |
| font-size: 12px; |
| color: var(--neutral-500); |
| line-height: 1.2; |
| white-space: normal; |
| } |
|
|
| .channel-editor-section-stack { |
| display: flex; |
| flex-direction: column; |
| gap: 4px; |
| min-width: 0; |
| flex: 1 1 360px; |
| } |
|
|
| .channel-editor-section-header { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| gap: 4px 12px; |
| flex-wrap: wrap; |
| margin-bottom: 0; |
| } |
|
|
| .channel-editor-section-title { |
| margin: 0; |
| display: flex; |
| align-items: center; |
| flex-wrap: wrap; |
| gap: 6px; |
| min-width: 0; |
| } |
|
|
| .channel-editor-section-meta { |
| margin: 0; |
| font-weight: 500; |
| white-space: nowrap; |
| } |
|
|
| .channel-editor-exact-url-hint { |
| font-weight: 400; |
| line-height: 1.35; |
| white-space: normal; |
| } |
|
|
| .channel-editor-strategy-row { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| flex-wrap: wrap; |
| min-width: 0; |
| } |
|
|
| .channel-editor-section-title--key { |
| flex-wrap: nowrap; |
| overflow-x: auto; |
| scrollbar-width: none; |
| } |
|
|
| .channel-editor-section-title--key::-webkit-scrollbar { |
| display: none; |
| } |
|
|
| .channel-editor-inline-strategy { |
| display: inline-flex; |
| align-items: center; |
| gap: 8px; |
| min-width: 0; |
| flex: 0 0 auto; |
| } |
|
|
| .channel-editor-section-actions { |
| display: flex; |
| align-items: center; |
| justify-content: flex-end; |
| gap: 4px; |
| flex-wrap: wrap; |
| min-width: 0; |
| flex: 0 1 auto; |
| } |
|
|
| .channel-editor-section-actions--keys, |
| .channel-editor-section-actions--models { |
| gap: 6px; |
| } |
|
|
| .channel-editor-action-row { |
| display: flex; |
| align-items: center; |
| gap: 4px; |
| flex-wrap: wrap; |
| min-width: 0; |
| } |
|
|
| .channel-editor-action-btn, |
| .channel-editor-section-actions .btn { |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| gap: 4px; |
| min-width: 0; |
| white-space: nowrap; |
| } |
|
|
| .channel-editor-footer { |
| display: flex; |
| align-items: center; |
| gap: 12px; |
| flex-wrap: wrap; |
| margin-top: auto; |
| } |
|
|
| .channel-editor-checkbox-label { |
| margin: 0; |
| display: inline-flex; |
| align-items: center; |
| gap: 8px; |
| } |
|
|
| .channel-editor-checkbox-label[hidden] { |
| display: none !important; |
| } |
|
|
| .channel-editor-footer-fields { |
| display: flex; |
| align-items: center; |
| gap: 12px; |
| flex-wrap: wrap; |
| min-width: 0; |
| } |
|
|
| .channel-editor-inline-field { |
| display: flex; |
| align-items: center; |
| gap: 6px; |
| min-width: 0; |
| } |
|
|
| .channel-editor-inline-field[hidden] { |
| display: none !important; |
| } |
|
|
| .channel-editor-inline-field--scheduled-model { |
| flex: 0 1 auto; |
| } |
|
|
| .channel-editor-scheduled-model-control { |
| width: 184px; |
| min-width: 184px; |
| max-width: 184px; |
| } |
|
|
| .channel-editor-scheduled-model-control .filter-select:disabled { |
| color: var(--neutral-400); |
| } |
|
|
| .channel-editor-scheduled-model-control .filter-select { |
| width: 100%; |
| } |
|
|
| .channel-editor-inline-field-input { |
| display: inline-flex; |
| align-items: center; |
| gap: 6px; |
| } |
|
|
| .channel-editor-footer-actions { |
| margin-left: auto; |
| display: flex; |
| justify-content: flex-end; |
| gap: 10px; |
| min-width: 0; |
| } |
|
|
| .channel-editor-group--footer { |
| flex: 0 0 auto; |
| padding: 8px 0 2px; |
| margin: 0; |
| border-top: 1px solid var(--neutral-200); |
| } |
|
|
| #channelModal .channel-editor-input { |
| padding: 6px 8px; |
| border-width: 1px; |
| border-radius: 8px; |
| font-size: 14px; |
| } |
|
|
| #channelModal .inline-table-container.tall { |
| --channel-model-visible-rows: 8; |
| --channel-editor-table-row-height: 36px; |
| --channel-editor-table-header-height: 38px; |
| min-height: 0; |
| max-height: calc(var(--channel-editor-table-header-height) + (var(--channel-model-visible-rows) * var(--channel-editor-table-row-height))); |
| } |
|
|
| #channelModal .inline-table th { |
| padding: 4px 8px; |
| line-height: 1.2; |
| } |
|
|
| #channelModal .inline-table td { |
| padding: 3px 6px; |
| } |
|
|
| .channel-editor-footer-btn { |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| gap: 6px; |
| } |
|
|
| .channel-editor-footer-btn svg { |
| flex: 0 0 auto; |
| } |
|
|
| .filter-label { |
| font-size: 13px; |
| font-weight: 600; |
| color: var(--neutral-700); |
| } |
|
|
| .filter-info, |
| .filter-info * { |
| color: var(--neutral-700); |
| font-weight: 500; |
| } |
|
|
| .channel-hover-clear-btn:hover { |
| background: var(--neutral-100) !important; |
| } |
|
|
| .channel-hover-key-toggle-btn:hover { |
| background: var(--neutral-50) !important; |
| border-color: var(--neutral-400) !important; |
| } |
|
|
| .channel-hover-modal-close-btn:hover { |
| background: var(--neutral-200) !important; |
| } |
|
|
| .channel-modal-close-btn { |
| width: 28px; |
| height: 28px; |
| padding: 0; |
| border-radius: 999px; |
| background: var(--neutral-100); |
| color: var(--neutral-600); |
| } |
|
|
| .table-container { |
| background: rgba(255, 255, 255, 0.97); |
| border-color: rgba(148, 163, 184, 0.18); |
| box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04); |
| } |
|
|
| |
| .channel-table { |
| table-layout: fixed; |
| } |
|
|
| .channel-table thead th, |
| .channel-table td { |
| font-size: 13px; |
| line-height: 1.35; |
| vertical-align: middle; |
| box-sizing: border-box; |
| } |
|
|
| .channel-table thead th { |
| height: 44px; |
| padding: 8px 10px; |
| white-space: nowrap; |
| user-select: none; |
| text-align: center; |
| background: #eff1f7; |
| color: var(--neutral-900); |
| font-size: 13px; |
| font-weight: 700; |
| border-bottom: 1px solid #d9e0e7; |
| } |
|
|
| .channel-table td { |
| padding: 6px 10px; |
| color: var(--neutral-800); |
| border-bottom: 1px solid #e3e8ee; |
| } |
|
|
| .channel-table td.ch-col-priority, |
| .channel-table td.ch-col-duration, |
| .channel-table td.ch-col-usage, |
| .channel-table td.ch-col-cost, |
| .channel-table td.ch-col-last-success { |
| text-align: center; |
| } |
|
|
| .channel-table .ch-col-enabled { |
| width: 76px; |
| min-width: 76px; |
| max-width: 76px; |
| white-space: nowrap; |
| text-align: center; |
| } |
|
|
|
|
| .channel-table tbody tr.channel-table-row, |
| .channel-table tbody tr.channel-table-row > td { |
| height: 90px; |
| } |
|
|
| .channel-table tbody tr { |
| transition: background 0.15s ease; |
| background: rgba(255, 255, 255, 0.98); |
| } |
|
|
| .channel-table tbody tr:nth-child(odd) { |
| background: #ffffff; |
| } |
|
|
| .channel-table tbody tr:nth-child(even) { |
| background: #f8fafc; |
| } |
|
|
| .channel-table tbody tr:last-child td { |
| border-bottom: none; |
| } |
|
|
| .channel-table tbody tr:hover { |
| background: #f0ece5; |
| } |
|
|
| |
| .ch-col-checkbox { |
| width: 32px; |
| min-width: 32px; |
| max-width: 32px; |
| text-align: center; |
| box-sizing: border-box; |
| } |
|
|
| .ch-col-name { |
| width: 480px; |
| min-width: 480px; |
| max-width: 480px; |
| } |
|
|
| .ch-col-priority { |
| width: 90px; |
| min-width: 90px; |
| max-width: 90px; |
| white-space: normal; |
| text-align: center; |
| } |
|
|
| .ch-priority-stack { |
| display: flex; |
| flex-direction: column; |
| align-items: stretch; |
| justify-content: center; |
| width: max-content; |
| max-width: 100%; |
| margin: 0 auto; |
| gap: 2px; |
| line-height: 1.15; |
| } |
|
|
| .ch-priority-row { |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| width: 100%; |
| gap: 4px; |
| min-width: 0; |
| line-height: 1.15; |
| } |
|
|
| .ch-priority-editor-wrap { |
| display: inline-block; |
| max-width: 100%; |
| } |
|
|
| .ch-priority-editor { |
| display: inline-flex; |
| align-items: center; |
| width: 56px; |
| height: 30px; |
| border: 1px solid var(--neutral-300); |
| border-radius: 8px; |
| background: #ffffff; |
| overflow: hidden; |
| box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04); |
| } |
|
|
| .ch-priority-editor-wrap.is-saving { |
| opacity: 0.65; |
| pointer-events: none; |
| } |
|
|
| .ch-priority-input { |
| width: 56px; |
| height: 30px; |
| border: 0; |
| background: #ffffff; |
| color: var(--neutral-900); |
| font-size: 13px; |
| font-weight: 700; |
| line-height: 30px; |
| text-align: center; |
| font-variant-numeric: tabular-nums; |
| appearance: textfield; |
| -moz-appearance: textfield; |
| } |
|
|
| .ch-priority-input::-webkit-outer-spin-button, |
| .ch-priority-input::-webkit-inner-spin-button { |
| margin: 0; |
| -webkit-appearance: none; |
| } |
|
|
| .ch-priority-input:focus { |
| outline: 2px solid rgba(59, 130, 246, 0.22); |
| outline-offset: -2px; |
| } |
|
|
| .ch-priority-input.is-dirty { |
| background: #fffbeb; |
| } |
|
|
| .ch-priority-label { |
| color: var(--neutral-600); |
| font-size: 13px; |
| font-weight: 500; |
| white-space: nowrap; |
| text-align: left; |
| flex: 0 0 auto; |
| } |
|
|
| .ch-priority-value { |
| margin-left: auto; |
| text-align: right; |
| font-size: 13px; |
| font-weight: 600; |
| font-variant-numeric: tabular-nums; |
| white-space: nowrap; |
| } |
|
|
| .ch-priority-base-value { |
| color: var(--neutral-600); |
| } |
|
|
| .ch-priority-stale { |
| color: var(--neutral-400); |
| text-decoration: line-through; |
| text-decoration-thickness: 1px; |
| } |
|
|
| .ch-priority-health-good { |
| color: var(--success-600); |
| } |
|
|
| .ch-priority-health-bad { |
| color: var(--error-600); |
| } |
|
|
| .ch-col-duration { |
| width: 184px; |
| min-width: 184px; |
| max-width: 184px; |
| white-space: normal; |
| text-align: center; |
| } |
|
|
| .ch-col-usage { |
| width: 100px; |
| line-height: 1.35; |
| text-align: center; |
| } |
|
|
| .ch-col-cost { |
| width: 70px; |
| min-width: 70px; |
| max-width: 70px; |
| white-space: nowrap; |
| text-align: center; |
| } |
|
|
| .ch-col-last-success { |
| width: 156px; |
| min-width: 156px; |
| max-width: 156px; |
| white-space: normal; |
| text-align: center; |
| } |
|
|
| .ch-last-status { |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| gap: 3px; |
| min-width: 0; |
| color: var(--neutral-700); |
| font-size: 12px; |
| line-height: 1.25; |
| } |
|
|
| .ch-last-status--ok { |
| color: var(--success-700); |
| font-weight: 650; |
| } |
|
|
| .ch-last-status--empty { |
| color: var(--neutral-500); |
| font-weight: 600; |
| } |
|
|
| .ch-last-request { |
| display: flex; |
| align-items: center; |
| gap: 6px; |
| flex-wrap: nowrap; |
| position: relative; |
| padding: 4px 8px; |
| border: 1px solid var(--error-200); |
| border-radius: 6px; |
| background: #fff7f7; |
| color: var(--error-700); |
| font-size: 12px; |
| line-height: 1.25; |
| } |
|
|
| .ch-last-request__state { |
| flex: 0 0 auto; |
| color: var(--neutral-500); |
| font-weight: 800; |
| } |
|
|
| .ch-last-request__time { |
| flex: 0 0 auto; |
| color: var(--neutral-500); |
| font-weight: 650; |
| } |
|
|
| .ch-last-request__detail { |
| position: relative; |
| flex: 0 0 auto; |
| min-width: 0; |
| color: var(--error-700); |
| } |
|
|
| .ch-last-request__detail[open] { |
| flex: 0 0 auto; |
| order: 0; |
| } |
|
|
| .ch-last-request__detail summary { |
| cursor: pointer; |
| color: var(--neutral-400); |
| font-size: 11px; |
| font-weight: 700; |
| white-space: nowrap; |
| } |
|
|
| .ch-last-request__panel { |
| position: absolute; |
| top: calc(100% + 6px); |
| left: 0; |
| z-index: 30; |
| width: min(420px, calc(100vw - 48px)); |
| padding: 8px; |
| border: 1px solid var(--error-200); |
| border-radius: 8px; |
| background: #fff; |
| box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16); |
| } |
|
|
| .ch-last-request__detail pre { |
| box-sizing: border-box; |
| max-height: 160px; |
| width: 100%; |
| margin: 0; |
| padding: 8px; |
| overflow: auto; |
| border: 1px solid var(--error-200); |
| border-radius: 6px; |
| background: #fff; |
| color: var(--error-800); |
| font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; |
| font-size: 11px; |
| line-height: 1.35; |
| white-space: pre-wrap; |
| word-break: break-word; |
| } |
|
|
| .ch-last-request__copy { |
| display: inline-flex; |
| align-items: center; |
| flex: 0 0 auto; |
| margin-top: 6px; |
| padding: 1px 7px; |
| border: 1px solid var(--error-200); |
| border-radius: 5px; |
| background: #fff; |
| color: var(--error-700); |
| font-size: 11px; |
| font-weight: 700; |
| line-height: 1.45; |
| cursor: pointer; |
| white-space: nowrap; |
| } |
|
|
| .ch-last-request__copy:hover { |
| border-color: var(--error-300); |
| color: var(--error-800); |
| } |
|
|
| .ch-col-actions { |
| width: 136px; |
| min-width: 136px; |
| max-width: 136px; |
| position: relative; |
| white-space: nowrap; |
| text-align: right; |
| } |
|
|
| .ch-actions-stack { |
| display: flex; |
| align-items: center; |
| justify-content: flex-end; |
| width: 100%; |
| min-height: 32px; |
| } |
|
|
| .ch-action-statuses { |
| position: absolute; |
| top: 8px; |
| right: 8px; |
| display: flex; |
| justify-content: flex-end; |
| width: 100%; |
| pointer-events: none; |
| } |
|
|
| .ch-action-statuses:empty { |
| display: none; |
| } |
|
|
| .channel-enable-switch { |
| position: relative; |
| display: inline-flex; |
| align-items: center; |
| width: 42px; |
| height: 24px; |
| padding: 0; |
| border: 1px solid transparent; |
| border-radius: 999px; |
| cursor: pointer; |
| transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; |
| } |
|
|
| .channel-enable-switch:focus-visible { |
| outline: none; |
| box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.22); |
| } |
|
|
| .channel-enable-switch__knob { |
| position: absolute; |
| top: 2px; |
| left: 2px; |
| width: 18px; |
| height: 18px; |
| border-radius: 999px; |
| background: #ffffff; |
| box-shadow: 0 1px 3px rgba(15, 23, 42, 0.24); |
| transition: transform 0.18s ease; |
| } |
|
|
| .channel-enable-switch--on { |
| background: #22c55e; |
| border-color: #16a34a; |
| } |
|
|
| .channel-enable-switch--on .channel-enable-switch__knob { |
| transform: translateX(18px); |
| } |
|
|
| .channel-enable-switch--off { |
| background: #cbd5e1; |
| border-color: #94a3b8; |
| } |
|
|
| |
| .ch-name-cell { |
| position: relative; |
| display: block; |
| width: 100%; |
| min-width: 0; |
| padding-right: 52px; |
| } |
|
|
| .ch-name-line { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| width: 100%; |
| min-width: 0; |
| font-size: 13px; |
| line-height: 1.3; |
| } |
|
|
| .ch-name-main { |
| display: flex; |
| align-items: center; |
| gap: 4px; |
| min-width: 0; |
| flex: 1 1 auto; |
| } |
|
|
| .ch-name-statuses { |
| margin-left: auto; |
| display: inline-flex; |
| align-items: center; |
| gap: 6px; |
| flex: 0 0 auto; |
| white-space: nowrap; |
| } |
|
|
| .ch-name-line strong { |
| flex: 0 1 auto; |
| min-width: 0; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| color: var(--neutral-900); |
| font-size: 13px; |
| } |
|
|
| .ch-url-line { |
| color: var(--neutral-500); |
| font-size: 13px; |
| font-weight: 500; |
| max-width: 100%; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| margin-top: 1px; |
| } |
|
|
| .ch-refresh-result-slot { |
| margin-top: 5px; |
| max-width: 100%; |
| } |
|
|
| .ch-refresh-result-slot:empty { |
| display: none; |
| } |
|
|
| .ch-last-request-slot { |
| margin-top: 5px; |
| max-width: 100%; |
| } |
|
|
| .ch-last-request-slot:empty { |
| display: none; |
| } |
|
|
| .ch-last-request-slot--desktop { |
| display: block; |
| } |
|
|
| .ch-last-request-slot--mobile { |
| display: none; |
| } |
|
|
| .ch-name-cell .ch-last-request-slot--desktop .ch-last-request { |
| width: fit-content; |
| max-width: 100%; |
| } |
|
|
| .channel-refresh-result { |
| display: inline-flex; |
| align-items: center; |
| max-width: 100%; |
| gap: 6px; |
| padding: 3px 7px; |
| border: 1px solid var(--neutral-200); |
| border-radius: 6px; |
| background: var(--neutral-50); |
| font-size: 12px; |
| line-height: 1.3; |
| color: var(--neutral-700); |
| vertical-align: top; |
| } |
|
|
| .channel-refresh-result--processing { |
| border-color: #bfdbfe; |
| background: #eff6ff; |
| color: #1d4ed8; |
| } |
|
|
| .channel-refresh-result--updated { |
| border-color: #bbf7d0; |
| background: #f0fdf4; |
| color: #15803d; |
| } |
|
|
| .channel-refresh-result--unchanged { |
| border-color: #e2e8f0; |
| background: #f8fafc; |
| color: #475569; |
| } |
|
|
| .channel-refresh-result--failed { |
| display: block; |
| width: min(100%, 420px); |
| border-color: #fecaca; |
| background: #fef2f2; |
| color: #b91c1c; |
| } |
|
|
| .channel-refresh-result__line { |
| display: flex; |
| align-items: center; |
| gap: 6px; |
| min-width: 0; |
| flex-wrap: wrap; |
| } |
|
|
| .channel-refresh-result__status { |
| flex: 0 0 auto; |
| font-weight: 700; |
| white-space: nowrap; |
| } |
|
|
| .channel-refresh-result__summary { |
| min-width: 0; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| } |
|
|
| .channel-refresh-result--failed .channel-refresh-result__summary { |
| flex: 1 1 140px; |
| } |
|
|
| .channel-refresh-result__detail { |
| flex: 0 0 auto; |
| min-width: 0; |
| } |
|
|
| .channel-refresh-result__detail summary { |
| cursor: pointer; |
| color: #991b1b; |
| font-weight: 600; |
| list-style: none; |
| white-space: nowrap; |
| } |
|
|
| .channel-refresh-result__detail summary::-webkit-details-marker { |
| display: none; |
| } |
|
|
| .channel-refresh-result__detail pre { |
| margin: 6px 0 0; |
| max-height: 240px; |
| overflow: auto; |
| padding: 8px; |
| border-radius: 6px; |
| background: rgba(255, 255, 255, 0.75); |
| border: 1px solid #fecaca; |
| color: #7f1d1d; |
| font-family: 'Monaco', 'Menlo', 'Courier New', monospace; |
| font-size: 12px; |
| line-height: 1.5; |
| white-space: pre-wrap; |
| word-break: break-word; |
| } |
|
|
| .channel-refresh-result-action { |
| flex: 0 0 auto; |
| padding: 1px 6px; |
| border: 1px solid rgba(185, 28, 28, 0.26); |
| border-radius: 5px; |
| background: rgba(255, 255, 255, 0.72); |
| color: #991b1b; |
| font-size: 12px; |
| line-height: 1.4; |
| cursor: pointer; |
| white-space: nowrap; |
| } |
|
|
| .channel-refresh-result-action:hover { |
| background: #ffffff; |
| border-color: rgba(185, 28, 28, 0.45); |
| } |
|
|
| .ch-timing { |
| display: flex; |
| flex-direction: column; |
| align-items: stretch; |
| width: max-content; |
| max-width: 100%; |
| margin: 0 auto; |
| gap: 2px; |
| line-height: 1.15; |
| } |
|
|
| .ch-timing-row, |
| .ch-usage-row { |
| display: flex; |
| align-items: center; |
| justify-content: flex-start; |
| width: auto; |
| gap: 6px; |
| min-width: 0; |
| line-height: 1.15; |
| } |
|
|
| .ch-timing-label, |
| .ch-usage-label { |
| color: var(--neutral-600); |
| font-size: 13px; |
| font-weight: 500; |
| white-space: nowrap; |
| text-align: left; |
| flex: 0 0 auto; |
| } |
|
|
| .ch-timing-value, |
| .ch-usage-value { |
| margin-left: 0; |
| text-align: right; |
| font-size: 13px; |
| font-weight: 600; |
| font-variant-numeric: tabular-nums; |
| white-space: nowrap; |
| } |
|
|
| .ch-cell-placeholder { |
| color: var(--neutral-400); |
| } |
|
|
| .ch-usage-list { |
| display: flex; |
| flex-direction: column; |
| align-items: stretch; |
| width: max-content; |
| max-width: 100%; |
| margin: 0 auto; |
| gap: 2px; |
| } |
|
|
| |
| .ch-models-text { |
| display: -webkit-box; |
| -webkit-line-clamp: 2; |
| line-clamp: 2; |
| -webkit-box-orient: vertical; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| word-break: break-all; |
| font-size: 13px; |
| color: var(--neutral-700); |
| line-height: 1.35; |
| } |
|
|
| |
| .ch-action-group { |
| display: inline-flex; |
| flex-wrap: nowrap; |
| gap: 4px; |
| align-items: center; |
| } |
|
|
| .ch-action-group .btn-icon { |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| width: 28px; |
| height: 28px; |
| padding: 0; |
| line-height: 0; |
| white-space: nowrap; |
| } |
|
|
| .ch-action-group .btn-icon.btn-danger { |
| color: var(--error-600); |
| } |
|
|
| .ch-action-group .btn-icon.btn-danger:hover { |
| color: var(--error-700); |
| border-color: var(--error-400); |
| background: var(--error-50); |
| } |
|
|
| .channel-table-selection-toggle { |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| width: 100%; |
| gap: 0; |
| } |
|
|
| .channel-table-selection-toggle #visibleSelectionToggleText { |
| display: none; |
| } |
|
|
| .channel-table-selection-toggle #visibleSelectionCheckbox { |
| width: 16px; |
| height: 16px; |
| margin: 0; |
| } |
|
|
| |
| .channel-table-row.channel-card-cooldown { |
| position: static; |
| border-color: inherit !important; |
| } |
|
|
| .channel-table tbody tr.channel-card-cooldown { |
| background: linear-gradient(135deg, #fff7ed 0%, #fffbeb 100%); |
| } |
|
|
| .channel-table tbody tr.channel-card-cooldown:hover { |
| background: linear-gradient(135deg, #ffedd5 0%, #fef9c3 100%); |
| } |
|
|
| .channel-table-row.channel-card-cooldown::before { |
| content: none; |
| display: none; |
| } |
|
|
| .channel-table-row.channel-card-cooldown > td { |
| background: transparent; |
| } |
|
|
| .channel-table-row.channel-card-cooldown:hover > td { |
| background: transparent; |
| } |
|
|
| |
| .channel-table .health-indicator { |
| margin-top: 2px; |
| } |
|
|
| .channel-card-top-row { |
| display: flex; |
| align-items: center; |
| gap: 12px; |
| } |
|
|
| .channel-card-status { |
| flex-shrink: 0; |
| font-size: 0.875rem; |
| color: var(--neutral-600); |
| white-space: nowrap; |
| } |
|
|
| .channel-card-bottom-row { |
| display: flex; |
| align-items: center; |
| gap: 12px; |
| margin-top: 8px; |
| padding-top: 8px; |
| border-top: 1px solid var(--neutral-200); |
| flex-wrap: wrap; |
| } |
|
|
| .channel-card-bottom-row>.channel-actions { |
| margin-left: auto; |
| } |
|
|
| .channel-stats-inline { |
| display: flex; |
| align-items: center; |
| gap: 6px; |
| flex-wrap: wrap; |
| } |
|
|
| |
| .view-toggle-group { |
| display: flex; |
| gap: 4px; |
| background: var(--neutral-100); |
| padding: 4px; |
| border-radius: 8px; |
| } |
|
|
| .view-toggle-btn { |
| display: flex; |
| align-items: center; |
| gap: 6px; |
| padding: 6px 12px; |
| border: none; |
| background: transparent; |
| color: var(--neutral-600); |
| font-size: 13px; |
| font-weight: 500; |
| border-radius: 6px; |
| cursor: pointer; |
| transition: all 0.2s ease; |
| } |
|
|
| .view-toggle-btn:hover { |
| color: var(--neutral-800); |
| background: var(--neutral-200); |
| } |
|
|
| .view-toggle-btn.active { |
| background: var(--white); |
| color: var(--primary-600); |
| box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); |
| } |
|
|
| .view-toggle-btn svg { |
| width: 16px; |
| height: 16px; |
| } |
|
|
| |
| .charts-grid { |
| display: grid; |
| grid-template-columns: repeat(2, 1fr); |
| gap: 24px; |
| padding: 8px 0; |
| } |
|
|
| @media (max-width: 768px) { |
| .charts-grid { |
| grid-template-columns: 1fr; |
| } |
| } |
|
|
| |
| .chart-card { |
| background: var(--white); |
| border: 1px solid var(--neutral-200); |
| border-radius: 12px; |
| padding: 16px; |
| } |
|
|
| .chart-title { |
| font-size: 14px; |
| font-weight: 600; |
| color: var(--neutral-700); |
| margin: 0 0 12px 0; |
| text-align: center; |
| } |
|
|
| |
| .pie-chart-container { |
| width: 100%; |
| height: 280px; |
| } |
|
|
| |
| .draggable-key-row { |
| cursor: move; |
| transition: background-color 0.2s; |
| } |
|
|
| .draggable-key-row.dragging { |
| opacity: 0.5; |
| background-color: var(--neutral-100); |
| } |
|
|
| .draggable-key-row.drag-over { |
| border-top: 2px solid var(--primary-500) !important; |
| } |
|
|
| |
| .health-indicator { |
| display: flex; |
| align-items: center; |
| gap: 6px; |
| margin-top: 4px; |
| flex-wrap: nowrap; |
| min-width: 0; |
| } |
|
|
| .health-track { |
| display: grid; |
| grid-template-columns: repeat(48, 6px); |
| gap: 1px; |
| width: 335px; |
| min-width: 335px; |
| max-width: 335px; |
| flex: 0 0 335px; |
| } |
|
|
| .health-block { |
| width: 100%; |
| height: 12px; |
| border-radius: 1px; |
| transition: transform 0.2s ease, box-shadow 0.2s ease; |
| position: relative; |
| } |
|
|
| .health-block:hover { |
| transform: none; |
| box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); |
| z-index: 10; |
| } |
|
|
| .health-block.healthy { |
| background: #22c55e; |
| } |
|
|
| .health-block.warning { |
| background: #f59e0b; |
| } |
|
|
| .health-block.critical { |
| background: #ef4444; |
| } |
|
|
| .health-block.unknown { |
| background: #d1d5db; |
| } |
|
|
| .health-rate { |
| margin-left: 0; |
| font-size: 12px; |
| font-weight: 500; |
| white-space: nowrap; |
| font-variant-numeric: tabular-nums; |
| } |
|
|
| .channel-toolbar-actions { |
| flex: none; |
| display: flex; |
| gap: 8px; |
| align-items: center; |
| flex-wrap: wrap; |
| justify-content: flex-end; |
| } |
|
|
| .channels-filter-controls .filter-group, |
| .trend-filter-controls .filter-group { |
| flex: 0 1 auto; |
| } |
|
|
| .trend-filter-controls > .filter-actions--page { |
| margin-left: auto; |
| } |
|
|
| .channel-filter-summary { |
| margin-left: auto; |
| display: flex; |
| align-items: center; |
| gap: 12px; |
| flex-wrap: wrap; |
| } |
|
|
| .channel-filter-summary .filter-info { |
| margin-left: 0; |
| } |
|
|
| |
| .logs-pagination-card .pagination-container { |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| } |
|
|
| .logs-pagination-card .pagination-controls { |
| justify-content: center; |
| } |
|
|
| .pagination-page-size-control { |
| display: inline-flex; |
| align-items: center; |
| gap: var(--space-1); |
| white-space: nowrap; |
| font-size: var(--text-sm); |
| font-weight: var(--font-normal); |
| color: var(--neutral-700); |
| font-variant-numeric: tabular-nums; |
| } |
|
|
| .pagination-page-size-control select.logs-jump-input { |
| width: 64px; |
| padding-right: 4px; |
| cursor: pointer; |
| } |
|
|
| .logs-pagination-card .logs-pagination-controls { |
| gap: var(--space-1); |
| flex-wrap: wrap; |
| } |
|
|
| .logs-pagination-card .logs-pagination-controls .btn-sm { |
| padding: 2px; |
| gap: 4px; |
| font-size: var(--text-sm); |
| } |
|
|
| .logs-pagination-card .logs-pagination-controls svg { |
| width: 14px; |
| height: 14px; |
| } |
|
|
| .logs-pagination-card .logs-pagination-info { |
| margin: 0 var(--space-2); |
| display: inline-flex; |
| align-items: center; |
| gap: var(--space-1); |
| flex-wrap: wrap; |
| justify-content: center; |
| font-size: var(--text-sm); |
| font-weight: var(--font-normal); |
| color: var(--neutral-700); |
| font-variant-numeric: tabular-nums; |
| } |
|
|
| .logs-pagination-card .logs-pagination-info #channels_current_page, |
| .logs-pagination-card .logs-pagination-info #channels_total_pages { |
| display: inline-block; |
| min-width: 3ch; |
| text-align: center; |
| font-weight: var(--font-semibold); |
| color: var(--neutral-900); |
| } |
|
|
| .logs-pagination-card .logs-pagination-separator { |
| margin-left: var(--space-1); |
| color: var(--neutral-400); |
| } |
|
|
| .logs-pagination-card .logs-jump-input { |
| width: 84px; |
| padding: 4px 8px; |
| border: 1px solid var(--neutral-300); |
| border-radius: 4px; |
| text-align: center; |
| font-size: var(--text-sm); |
| color: var(--neutral-900); |
| background: rgba(255, 255, 255, 0.9); |
| color-scheme: light; |
| -webkit-text-fill-color: var(--neutral-900); |
| transition: border-color 0.2s, box-shadow 0.2s, background 0.2s; |
| } |
|
|
| .logs-pagination-card .logs-jump-input:focus { |
| outline: none; |
| border-color: var(--primary-500); |
| box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); |
| background: white; |
| } |
|
|
| .logs-pagination-card .logs-jump-input::placeholder { |
| color: var(--neutral-400); |
| } |
|
|
| .channel-selection-toggle { |
| display: inline-flex; |
| align-items: center; |
| gap: 8px; |
| padding: 0; |
| border: none; |
| border-radius: 0; |
| background: transparent; |
| color: var(--neutral-700); |
| font-size: var(--text-sm); |
| font-weight: 600; |
| line-height: 1; |
| cursor: pointer; |
| user-select: none; |
| transition: all var(--duration-fast); |
| } |
|
|
| .channel-selection-toggle:hover { |
| color: var(--neutral-900); |
| } |
|
|
| .channel-selection-toggle.is-disabled { |
| opacity: 0.55; |
| cursor: not-allowed; |
| pointer-events: none; |
| } |
|
|
| .channel-selection-toggle span { |
| white-space: nowrap; |
| } |
|
|
| .channel-test-inline-hint { |
| margin-left: 8px; |
| } |
|
|
| .channel-test-textarea { |
| min-height: 80px; |
| resize: vertical; |
| } |
|
|
| .channel-test-checkbox-label { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| cursor: pointer; |
| } |
|
|
| .channel-test-checkbox-label .control-checkbox { |
| flex: 0 0 auto; |
| } |
|
|
| .channel-test-concurrency-input { |
| width: 150px; |
| } |
|
|
| .channel-batch-progress { |
| margin-top: 16px; |
| padding: 16px; |
| background: var(--neutral-50); |
| border: 1px solid var(--neutral-200); |
| border-radius: 8px; |
| } |
|
|
| .channel-batch-progress-header { |
| display: flex; |
| justify-content: space-between; |
| margin-bottom: 8px; |
| } |
|
|
| .channel-batch-progress-title { |
| color: var(--neutral-700); |
| font-weight: 600; |
| } |
|
|
| .channel-batch-progress-counter, |
| .channel-batch-progress-status { |
| color: var(--neutral-600); |
| } |
|
|
| .channel-batch-progress-track { |
| width: 100%; |
| height: 8px; |
| overflow: hidden; |
| background: var(--neutral-200); |
| border-radius: 4px; |
| } |
|
|
| .channel-batch-progress-bar { |
| width: 0; |
| height: 100%; |
| background: linear-gradient(90deg, var(--primary-500), var(--primary-600)); |
| transition: width 0.3s; |
| } |
|
|
| .channel-batch-progress-status { |
| margin-top: 8px; |
| font-size: 13px; |
| } |
|
|
| .channel-import-modal-body { |
| padding: 5px; |
| } |
|
|
| .channel-export-modal-body { |
| padding: 15px; |
| } |
|
|
| .channel-import-hint { |
| color: var(--neutral-500); |
| font-size: 13px; |
| font-weight: 400; |
| } |
|
|
| .channel-import-textarea, |
| .channel-export-preview { |
| min-height: 150px; |
| resize: vertical; |
| font-size: 13px; |
| font-family: 'Monaco', 'Menlo', 'Courier New', monospace; |
| } |
|
|
| .channel-import-textarea { |
| min-height: 200px; |
| } |
|
|
| .channel-import-info { |
| margin-bottom: 16px; |
| padding: 12px; |
| color: var(--neutral-700); |
| font-size: 13px; |
| background: var(--info-50); |
| border: 1px solid var(--info-500); |
| border-radius: 6px; |
| } |
|
|
| .channel-import-info--compact { |
| padding: 2px; |
| } |
|
|
| .channel-import-info-row { |
| display: flex; |
| align-items: flex-start; |
| gap: 8px; |
| } |
|
|
| .channel-import-info-icon { |
| flex-shrink: 0; |
| margin-top: 2px; |
| } |
|
|
| .channel-import-info-list { |
| margin: 6px 0 0; |
| padding-left: 16px; |
| line-height: 1.6; |
| } |
|
|
| .channel-import-code { |
| padding: 2px 4px; |
| background: rgba(0, 0, 0, 0.05); |
| border-radius: 3px; |
| } |
|
|
| .channel-import-preview { |
| min-height: 44px; |
| margin-bottom: 2px; |
| } |
|
|
| .channel-import-preview-content { |
| padding: 12px; |
| color: var(--success-600); |
| background: var(--success-50); |
| border: 1px solid var(--success-500); |
| border-radius: 6px; |
| } |
|
|
| .channel-import-preview-row { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| font-weight: 600; |
| } |
|
|
| .channel-export-options { |
| display: flex; |
| gap: 20px; |
| margin-top: 8px; |
| } |
|
|
| .channel-export-option { |
| display: flex; |
| align-items: center; |
| gap: 6px; |
| cursor: pointer; |
| } |
|
|
| .channel-export-actions { |
| gap: 8px; |
| } |
|
|
| .channel-sort-modal { |
| max-height: 85vh; |
| overflow: hidden; |
| } |
|
|
| .channel-sort-modal-body { |
| flex: 1; |
| display: flex; |
| flex-direction: column; |
| padding: 20px; |
| overflow: hidden; |
| } |
|
|
| .channel-sort-list { |
| flex: 1; |
| padding: 12px; |
| overflow-y: auto; |
| background: var(--neutral-50); |
| border: 1px solid var(--neutral-200); |
| border-radius: 8px; |
| } |
|
|
| .channel-sort-actions { |
| align-items: center; |
| justify-content: space-between; |
| gap: 16px; |
| margin-top: 0; |
| padding-top: 16px; |
| } |
|
|
| .channel-sort-hint { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| color: var(--neutral-600); |
| font-size: 12px; |
| } |
|
|
| .channel-sort-hint-icon { |
| flex-shrink: 0; |
| color: var(--info-500); |
| } |
|
|
| .channel-sort-action-buttons { |
| display: flex; |
| gap: 12px; |
| } |
|
|
| .modal-inline-input { |
| background: rgba(255, 255, 255, 0.9); |
| color: var(--neutral-900); |
| color-scheme: light; |
| backdrop-filter: blur(8px); |
| transition: border-color 0.2s, box-shadow 0.2s, background 0.2s; |
| } |
|
|
| .modal-inline-input:focus { |
| outline: none; |
| border-color: var(--primary-500) !important; |
| box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); |
| background: white; |
| } |
|
|
| .modal-inline-input::placeholder { |
| color: var(--neutral-400); |
| } |
|
|
| .modal-inline-select { |
| background: rgba(255, 255, 255, 0.9); |
| color: var(--neutral-900); |
| color-scheme: light; |
| -webkit-text-fill-color: var(--neutral-900); |
| backdrop-filter: blur(8px); |
| } |
|
|
| .modal-inline-select option { |
| color: var(--neutral-900); |
| background: white; |
| } |
|
|
| .inline-url-col-select { |
| width: 70px; |
| } |
|
|
| .inline-url-table th { |
| padding: 6px 5px; |
| } |
|
|
| .inline-url-table td { |
| padding: 4px 4px; |
| } |
|
|
| .inline-url-col-url { |
| width: auto; |
| min-width: 0; |
| } |
|
|
| .inline-url-col-actions { |
| width: 96px; |
| white-space: nowrap; |
| } |
|
|
| .inline-url-col-status { |
| width: 72px; |
| white-space: nowrap; |
| text-align: center; |
| } |
|
|
| .redirect-row { |
| border-bottom: 1px solid var(--neutral-200); |
| } |
|
|
| .redirect-col-select, |
| .redirect-col-model, |
| .redirect-col-target, |
| .redirect-col-actions { |
| padding: 4px 10px; |
| } |
|
|
| .redirect-col-actions { |
| text-align: center; |
| } |
|
|
| .redirect-row-select { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| } |
|
|
| .redirect-row-checkbox { |
| width: 16px; |
| height: 16px; |
| } |
|
|
| .redirect-row-index { |
| color: var(--neutral-600); |
| font-size: 13px; |
| font-weight: 500; |
| } |
|
|
| .redirect-model-field { |
| display: flex; |
| align-items: center; |
| gap: 4px; |
| } |
|
|
| .redirect-model-field .modal-inline-input, |
| .redirect-col-target .modal-inline-input { |
| width: 100%; |
| padding: 3px 6px; |
| border: 1px solid var(--neutral-300); |
| border-radius: 6px; |
| font-size: 13px; |
| font-family: 'Monaco', 'Menlo', 'Courier New', monospace; |
| } |
|
|
| .redirect-model-field .redirect-from-input { |
| flex: 1 1 auto; |
| min-width: 0; |
| } |
|
|
| .redirect-lowercase-btn, |
| .redirect-delete-btn { |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| padding: 0; |
| color: var(--neutral-500); |
| background: white; |
| cursor: pointer; |
| transition: all 0.2s; |
| } |
|
|
| .redirect-lowercase-btn { |
| width: 22px; |
| height: 22px; |
| flex-shrink: 0; |
| border: 1px solid var(--neutral-300); |
| border-radius: 4px; |
| } |
|
|
| .redirect-delete-btn { |
| width: 24px; |
| height: 24px; |
| border: 1px solid var(--neutral-200); |
| border-radius: 6px; |
| } |
|
|
| .redirect-lowercase-btn:hover { |
| background: var(--primary-50); |
| border-color: var(--primary-500); |
| color: var(--primary-600); |
| } |
|
|
| .redirect-delete-btn:hover { |
| background: var(--error-50); |
| border-color: var(--error-500); |
| } |
|
|
| .redirect-empty-cell { |
| padding: 20px; |
| color: var(--neutral-500); |
| text-align: center; |
| } |
|
|
| .sort-item { |
| margin-bottom: 8px; |
| padding: 12px 16px; |
| background: white; |
| border: 1px solid var(--neutral-300); |
| border-radius: 8px; |
| cursor: move; |
| transition: all 0.2s; |
| } |
|
|
| .sort-item-body, |
| .sort-item-main, |
| .sort-item-meta, |
| .test-result-header, |
| .response-section-header { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| } |
|
|
| .sort-item-body, |
| .response-section-header { |
| justify-content: space-between; |
| gap: 12px; |
| } |
|
|
| .sort-item-main { |
| flex: 1; |
| gap: 12px; |
| min-width: 0; |
| } |
|
|
| .sort-item-handle { |
| color: var(--neutral-400); |
| flex-shrink: 0; |
| } |
|
|
| .sort-item-name { |
| color: var(--neutral-900); |
| font-weight: 600; |
| } |
|
|
| .sort-item-priority-label { |
| color: var(--neutral-500); |
| font-size: 13px; |
| } |
|
|
| .sort-item-priority-label { |
| color: var(--neutral-600); |
| } |
|
|
| .sort-item-meta { |
| gap: 8px; |
| flex-wrap: wrap; |
| } |
|
|
| .sort-item-status-badge { |
| display: inline-flex; |
| align-items: center; |
| padding: 2px 8px; |
| font-size: 12px; |
| font-weight: 500; |
| border-radius: 4px; |
| } |
|
|
| .sort-item-status-badge--disabled { |
| background: var(--neutral-200); |
| color: var(--neutral-600); |
| } |
|
|
| .sort-item-status-badge--cooldown { |
| background: var(--error-100); |
| color: var(--error-600); |
| } |
|
|
| .sort-item-status-badge--normal { |
| background: var(--success-100); |
| color: var(--success-600); |
| } |
|
|
| .sort-item.is-dragging { |
| opacity: 0.5; |
| } |
|
|
| .sort-item.is-drop-before { |
| border-top: 2px solid var(--primary-500); |
| } |
|
|
| .sort-item.is-drop-after { |
| border-bottom: 2px solid var(--primary-500); |
| } |
|
|
| .sort-list-empty { |
| padding: 40px; |
| color: var(--neutral-500); |
| text-align: center; |
| } |
|
|
| .test-result-header-icon { |
| font-size: 18px; |
| } |
|
|
| .response-section-title { |
| margin: 0; |
| } |
|
|
| .batch-fail-item { |
| margin: 4px 0; |
| } |
|
|
| .batch-test-fail-list { |
| margin: 8px 0; |
| padding-left: 20px; |
| } |
|
|
| .batch-test-fail-title { |
| margin-top: 12px; |
| color: var(--error-600); |
| } |
|
|
| .batch-test-fail-note { |
| margin-top: 8px; |
| color: var(--error-600); |
| } |
|
|
| .batch-test-success-note { |
| color: var(--success-600); |
| } |
|
|
| .inline-url-col-latency { |
| width: 60px; |
| white-space: nowrap; |
| text-align: center; |
| } |
|
|
| .inline-url-col-requests { |
| width: 68px; |
| white-space: nowrap; |
| text-align: center; |
| } |
|
|
| .inline-url-header { |
| display: flex; |
| align-items: center; |
| gap: 4px; |
| flex-wrap: wrap; |
| } |
|
|
| .inline-url-header > span:first-child { |
| white-space: nowrap; |
| } |
|
|
| .inline-url-header-hint { |
| margin: 0; |
| font-weight: 400; |
| font-size: 12px; |
| line-height: 1.35; |
| } |
|
|
| .channel-duplicate-hint { |
| margin-top: 6px; |
| padding: 7px 10px; |
| border: 1px solid var(--warning-400); |
| border-radius: 6px; |
| background: var(--warning-50); |
| color: var(--warning-600); |
| font-size: 12px; |
| line-height: 1.45; |
| } |
|
|
| .channel-duplicate-hint[hidden] { |
| display: none !important; |
| } |
|
|
| .inline-url-cell-center { |
| padding: 6px 6px !important; |
| text-align: center; |
| white-space: nowrap; |
| } |
|
|
| .inline-url-cell-metric { |
| font-family: Monaco, Menlo, monospace; |
| font-size: 12px; |
| color: var(--neutral-600); |
| } |
|
|
| .inline-url-actions { |
| display: flex; |
| justify-content: center; |
| gap: 6px; |
| } |
|
|
| .inline-url-status-placeholder { |
| color: var(--neutral-400); |
| font-size: 12px; |
| } |
|
|
| .inline-url-status-badge { |
| display: inline-flex; |
| align-items: center; |
| gap: 3px; |
| padding: 2px 6px; |
| border-radius: 10px; |
| font-size: 11px; |
| font-weight: 500; |
| line-height: 1.2; |
| } |
|
|
| .inline-url-status-badge--ok { |
| background: #DCFCE7; |
| color: #16A34A; |
| } |
|
|
| .inline-url-status-badge--cooldown { |
| background: #FEE2E2; |
| color: #DC2626; |
| } |
|
|
| .inline-url-status-badge--unknown { |
| background: var(--neutral-100); |
| color: var(--neutral-500); |
| } |
|
|
| .inline-url-status-dot { |
| width: 6px; |
| height: 6px; |
| border-radius: 50%; |
| flex: 0 0 auto; |
| } |
|
|
| .inline-url-status-dot--ok { |
| background: #16A34A; |
| } |
|
|
| .inline-url-status-dot--cooldown { |
| background: #DC2626; |
| } |
|
|
| .inline-url-status-dot--unknown { |
| background: var(--neutral-400); |
| } |
|
|
| .inline-url-status-badge--disabled { |
| background: #FEF3C7; |
| color: #D97706; |
| } |
|
|
| .inline-url-status-dot--disabled { |
| background: #D97706; |
| } |
|
|
| .inline-url-toggle-btn { |
| border: none; |
| border-radius: 4px; |
| padding: 3px 6px; |
| cursor: pointer; |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| transition: opacity 0.15s; |
| } |
|
|
| .inline-url-toggle-btn:hover { |
| opacity: 0.8; |
| } |
|
|
| .inline-url-toggle-btn:disabled { |
| opacity: 0.4; |
| cursor: not-allowed; |
| } |
|
|
| .inline-url-toggle-btn--enabled { |
| background: #DCFCE7; |
| color: #16A34A; |
| } |
|
|
| .inline-url-toggle-btn--disabled { |
| background: #FEE2E2; |
| color: #DC2626; |
| } |
|
|
| .model-select { |
| color: var(--neutral-900); |
| background: rgba(255, 255, 255, 0.9); |
| color-scheme: light; |
| -webkit-text-fill-color: var(--neutral-900); |
| } |
|
|
| .model-select option { |
| color: var(--neutral-900); |
| background: white; |
| } |
|
|
| .channel-batch-float { |
| position: fixed; |
| left: 50%; |
| bottom: 20px; |
| transform: translate(-50%, 14px); |
| opacity: 0; |
| pointer-events: none; |
| transition: opacity 0.2s ease, transform 0.2s ease; |
| z-index: 110; |
| max-width: calc(100vw - 32px); |
| } |
|
|
| .channel-batch-float.is-visible { |
| opacity: 1; |
| transform: translate(-50%, 0); |
| pointer-events: auto; |
| } |
|
|
| .channel-batch-float__content { |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| padding: 14px 24px; |
| border: 1.5px solid var(--neutral-200); |
| border-radius: var(--radius-xl); |
| background: #ffffff; |
| box-shadow: var(--shadow-xl); |
| } |
|
|
| .channel-batch-float__header { |
| display: inline-flex; |
| align-items: center; |
| gap: 10px; |
| flex-shrink: 0; |
| min-width: 0; |
| } |
|
|
| .channel-batch-selection { |
| display: inline-flex; |
| align-items: center; |
| gap: 10px; |
| flex-shrink: 0; |
| } |
|
|
| .channel-batch-count-badge { |
| width: 26px; |
| height: 26px; |
| border-radius: var(--radius-full); |
| background: var(--primary-500); |
| color: #fff; |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 0.85rem; |
| font-weight: 700; |
| line-height: 1; |
| flex-shrink: 0; |
| } |
|
|
| .channel-batch-selection-meta { |
| display: flex; |
| flex-direction: column; |
| gap: 1px; |
| min-width: 0; |
| } |
|
|
| .channel-batch-summary { |
| color: var(--neutral-800); |
| font-weight: 600; |
| white-space: nowrap; |
| font-size: var(--text-sm); |
| line-height: 1.2; |
| } |
|
|
| .channel-batch-divider { |
| width: 1px; |
| height: 28px; |
| background: var(--neutral-200); |
| } |
|
|
| .channel-batch-actions { |
| display: inline-flex; |
| align-items: center; |
| gap: 10px; |
| min-width: 0; |
| } |
|
|
| .channel-batch-action { |
| border-radius: var(--radius-base); |
| border: 1px solid var(--neutral-200); |
| background: var(--white); |
| color: var(--neutral-700); |
| font-size: var(--text-sm); |
| font-weight: 600; |
| padding: 0 14px; |
| min-height: 34px; |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| gap: 6px; |
| flex-shrink: 0; |
| box-shadow: none; |
| transition: all var(--duration-fast); |
| } |
|
|
| .channel-batch-action__icon { |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| width: 16px; |
| height: 16px; |
| line-height: 1; |
| } |
|
|
| .channel-batch-action:hover { |
| border-color: var(--neutral-300); |
| background: var(--neutral-50); |
| } |
|
|
| .channel-batch-action:disabled { |
| opacity: 0.45; |
| cursor: not-allowed; |
| box-shadow: none; |
| } |
|
|
| .channel-batch-action--enable { |
| background: var(--primary-500); |
| border-color: var(--primary-500); |
| color: #fff; |
| box-shadow: 0 1px 3px rgba(37, 99, 235, 0.3); |
| } |
|
|
| .channel-batch-action--enable:hover { |
| background: var(--primary-600); |
| border-color: var(--primary-600); |
| } |
|
|
| .channel-batch-action--disable { |
| color: #dc2626; |
| background: #fef2f2; |
| border-color: #fecaca; |
| } |
|
|
| .channel-batch-action--disable:hover { |
| background: #fee2e2; |
| border-color: #fca5a5; |
| } |
|
|
| .channel-batch-action--delete { |
| color: #fff; |
| background: #dc2626; |
| border-color: #dc2626; |
| box-shadow: 0 1px 3px rgba(220, 38, 38, 0.28); |
| } |
|
|
| .channel-batch-action--delete:hover { |
| background: #b91c1c; |
| border-color: #b91c1c; |
| } |
|
|
| .channel-batch-action--refresh { |
| color: var(--neutral-700); |
| background: var(--white); |
| border-color: var(--neutral-200); |
| } |
|
|
| .channel-batch-close { |
| margin-left: 2px; |
| width: 28px; |
| height: 28px; |
| border-radius: var(--radius-sm); |
| border: none; |
| background: transparent; |
| color: var(--neutral-400); |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| cursor: pointer; |
| flex-shrink: 0; |
| } |
|
|
| .channel-batch-close:hover { |
| background: var(--neutral-100); |
| color: var(--neutral-600); |
| } |
|
|
| .channel-batch-close:disabled { |
| opacity: 0.5; |
| cursor: not-allowed; |
| } |
|
|
| @media (max-width: 768px) { |
| .channel-page-hero { |
| gap: 10px; |
| } |
|
|
| .content-area > header .glass-card { |
| padding: var(--space-4) !important; |
| } |
|
|
| .channel-page-hero .page-subtitle { |
| font-size: var(--text-sm); |
| line-height: 1.5; |
| } |
|
|
| .channel-page-actions { |
| width: 100%; |
| display: grid; |
| grid-template-columns: repeat(3, minmax(0, 1fr)); |
| gap: 8px; |
| } |
|
|
| .channel-page-action-btn { |
| width: 100%; |
| padding: 6px 8px; |
| font-size: var(--text-xs); |
| min-height: 36px; |
| white-space: nowrap; |
| } |
|
|
| .channels-filter-controls .filter-label { |
| font-size: 0.72rem; |
| font-weight: 500; |
| color: var(--neutral-600); |
| } |
|
|
| .channels-filter-controls .filter-select { |
| font-size: 0.8rem; |
| padding: 6px 10px; |
| } |
|
|
| .channels-filter-controls .channel-search-filter-group { |
| order: 3; |
| grid-column: auto; |
| } |
|
|
| .channels-filter-controls .channel-model-filter-group { |
| order: 4; |
| } |
|
|
| .channel-search-control { |
| display: flex; |
| align-items: center; |
| width: 100%; |
| min-width: 0; |
| } |
|
|
| .channel-search-control .filter-combobox-wrapper { |
| width: 100%; |
| min-width: 0; |
| max-width: none; |
| } |
|
|
| .channel-filter-summary #clearSearchBtn { |
| width: auto; |
| min-width: 0; |
| flex: 0 0 auto; |
| font-size: 0.8rem; |
| padding: 6px 10px; |
| white-space: nowrap; |
| } |
|
|
| .channel-filter-summary .channel-filter-action-btn { |
| font-size: 0.8rem; |
| padding: 6px 10px; |
| } |
|
|
| .channel-editor-modal { |
| width: min(100%, calc(100vw - 16px)); |
| max-width: none; |
| margin: 8px; |
| padding: 16px; |
| min-height: calc(100vh - 16px); |
| max-height: calc(100vh - 16px); |
| font-size: 14px; |
| } |
|
|
| .channel-editor-form { |
| gap: 12px; |
| } |
|
|
| .channel-editor-body { |
| gap: 12px; |
| flex: none; |
| min-height: auto; |
| overflow: visible; |
| scrollbar-gutter: auto; |
| } |
|
|
| .channel-editor-group--primary { |
| display: block; |
| } |
|
|
| .channel-editor-group--primary .channel-editor-primary-row { |
| display: grid; |
| grid-template-columns: 1fr; |
| gap: 12px; |
| } |
|
|
| .channel-editor-group--primary .channel-editor-primary-row + .channel-editor-primary-row { |
| margin-top: 12px; |
| } |
|
|
| .channel-editor-primary-field { |
| flex-direction: row; |
| align-items: center; |
| gap: 6px; |
| } |
|
|
| .channel-editor-primary-field--type, |
| .channel-editor-primary-field--mode, |
| .channel-editor-primary-field--transforms { |
| align-items: flex-start; |
| } |
|
|
| .channel-editor-inline-group { |
| width: 100%; |
| } |
|
|
| .channel-editor-inline-label { |
| white-space: nowrap; |
| flex: 0 0 auto; |
| } |
|
|
| .channel-editor-primary-field .channel-editor-input { |
| flex: 1 1 auto; |
| min-width: 0; |
| } |
|
|
| .channel-editor-radio-group, |
| .channel-editor-footer-fields { |
| width: 100%; |
| } |
|
|
| .channel-editor-primary-field--type .channel-editor-radio-group, |
| .channel-editor-primary-field--mode .channel-editor-radio-group, |
| .channel-editor-radio-group--strategy { |
| width: auto; |
| flex: 1 1 auto; |
| flex-direction: row; |
| flex-wrap: nowrap; |
| overflow-x: auto; |
| scrollbar-width: none; |
| } |
|
|
| .channel-editor-primary-field--type .channel-editor-radio-group::-webkit-scrollbar, |
| .channel-editor-primary-field--mode .channel-editor-radio-group::-webkit-scrollbar, |
| .channel-editor-radio-group--strategy::-webkit-scrollbar, |
| .channel-editor-section-actions::-webkit-scrollbar, |
| .channel-editor-section-actions .channel-editor-action-row::-webkit-scrollbar { |
| display: none; |
| } |
|
|
| .channel-editor-radio-option { |
| flex: 0 0 auto; |
| justify-content: flex-start; |
| } |
|
|
| .channel-editor-radio-option-text { |
| white-space: nowrap; |
| } |
|
|
| .channel-editor-section-header { |
| flex-direction: column; |
| align-items: stretch; |
| } |
|
|
| .channel-editor-section-header--inline { |
| flex-direction: row; |
| align-items: center; |
| flex-wrap: nowrap; |
| gap: 8px; |
| } |
|
|
| .channel-editor-section-header--inline .channel-editor-section-title { |
| width: auto; |
| flex: 1 1 auto; |
| min-width: 0; |
| flex-wrap: nowrap; |
| overflow: hidden; |
| } |
|
|
| .channel-editor-section-header--inline .channel-editor-section-actions { |
| flex: 0 0 auto; |
| width: auto; |
| } |
|
|
| .channel-editor-section-title, |
| .channel-editor-section-stack, |
| .channel-editor-strategy-row { |
| width: 100%; |
| } |
|
|
| .channel-editor-section-stack { |
| flex: none; |
| } |
|
|
| .channel-editor-section-actions { |
| flex: none; |
| } |
|
|
| .channel-editor-strategy-row { |
| flex-direction: column; |
| align-items: stretch; |
| gap: 8px; |
| } |
|
|
| .channel-editor-strategy-row { |
| flex-direction: row; |
| align-items: center; |
| flex-wrap: nowrap; |
| gap: 8px; |
| } |
|
|
| .channel-editor-section-actions { |
| width: 100%; |
| justify-content: flex-start; |
| flex-wrap: nowrap; |
| overflow-x: auto; |
| } |
|
|
| .channel-editor-section-actions .channel-editor-action-row { |
| width: auto; |
| flex: 0 0 auto; |
| flex-wrap: nowrap; |
| overflow-x: auto; |
| } |
|
|
| .channel-editor-section-actions .btn, |
| .channel-editor-section-actions .channel-hover-key-toggle-btn, |
| .channel-editor-section-actions .channel-editor-action-row .btn { |
| flex: 0 0 auto; |
| } |
|
|
| .channel-editor-section-actions--keys .channel-hover-key-toggle-btn { |
| align-self: center; |
| } |
|
|
| .channel-editor-footer { |
| display: grid; |
| grid-template-columns: auto minmax(0, 1fr); |
| align-items: center; |
| gap: 10px 12px; |
| padding-top: 12px; |
| border-top: 1px solid var(--neutral-200); |
| } |
|
|
| #channelModal .channel-editor-checkbox-label { |
| grid-column: 1; |
| grid-row: 1; |
| width: auto; |
| align-self: center; |
| white-space: nowrap; |
| flex-shrink: 0; |
| } |
|
|
| .channel-editor-footer-fields { |
| grid-column: 1 / -1; |
| grid-row: 2; |
| width: 100%; |
| display: grid; |
| grid-template-columns: repeat(2, minmax(0, 1fr)); |
| gap: 8px 12px; |
| } |
|
|
| .channel-editor-inline-field { |
| display: grid; |
| grid-template-columns: auto minmax(0, 1fr); |
| align-items: center; |
| justify-content: stretch; |
| gap: 8px; |
| } |
|
|
| .channel-editor-inline-field-input { |
| justify-content: flex-start; |
| gap: 4px; |
| } |
|
|
| .channel-editor-inline-field > .form-input, |
| .channel-editor-inline-field-input { |
| margin-left: 0; |
| width: auto; |
| min-width: 0; |
| } |
|
|
| .channel-editor-inline-field-input .form-input { |
| margin-left: 0; |
| } |
|
|
| .channel-editor-inline-field > .form-input, |
| .channel-editor-inline-field-input .form-input { |
| width: 100% !important; |
| min-width: 0; |
| } |
|
|
| #channelModal .channel-editor-footer-actions { |
| grid-column: 2; |
| grid-row: 1; |
| width: auto; |
| margin-left: 0; |
| gap: 8px; |
| align-self: center; |
| } |
|
|
| #channelModal.modal, |
| #channelModal .channel-editor-modal { |
| backdrop-filter: none; |
| } |
|
|
| #channelModal .channel-editor-modal { |
| overflow-x: hidden; |
| overflow-y: auto; |
| } |
|
|
| #channelForm.channel-editor-form { |
| min-height: 0; |
| padding-bottom: 220px; |
| overflow: visible; |
| } |
|
|
| #channelModal .channel-editor-footer { |
| position: fixed; |
| left: 24px; |
| right: 24px; |
| bottom: 24px; |
| z-index: 120; |
| margin-top: 0; |
| padding: 10px 12px 0; |
| border: 1px solid var(--neutral-200); |
| border-radius: 18px; |
| background: rgba(255, 255, 255, 0.98); |
| box-shadow: 0 -8px 20px rgba(15, 23, 42, 0.08); |
| } |
|
|
| #channelModal .channel-editor-group--footer { |
| position: static; |
| margin: 0; |
| padding: 0; |
| background: transparent; |
| box-shadow: none; |
| border-top: none; |
| backdrop-filter: none; |
| -webkit-backdrop-filter: none; |
| } |
|
|
| .channel-editor-footer-actions .btn { |
| flex: 0 0 auto; |
| min-width: 84px; |
| padding: 9px 14px; |
| } |
|
|
| .channel-table-container { |
| overflow-x: visible; |
| border: none; |
| background: transparent; |
| box-shadow: none; |
| padding: 0; |
| } |
|
|
| .channel-table { |
| width: 100%; |
| table-layout: auto; |
| border-collapse: separate; |
| border-spacing: 0; |
| } |
|
|
| .channel-table thead { |
| display: block; |
| margin-bottom: 8px; |
| } |
|
|
| .channel-table thead tr { |
| display: block; |
| } |
|
|
| .channel-table thead th:not(.ch-col-checkbox) { |
| display: none; |
| } |
|
|
| .channel-table thead th.ch-col-checkbox { |
| display: block; |
| width: 100% !important; |
| min-width: 0 !important; |
| max-width: none !important; |
| padding: 0; |
| border: none; |
| background: transparent; |
| text-align: left; |
| } |
|
|
| .channel-table-selection-toggle { |
| justify-content: flex-start; |
| gap: 8px; |
| } |
|
|
| .channel-table-selection-toggle #visibleSelectionToggleText { |
| display: inline; |
| } |
|
|
| .channel-table tbody { |
| display: grid; |
| gap: 12px; |
| } |
|
|
| .channel-table tbody tr, |
| .channel-table tbody tr.channel-table-row, |
| .channel-table tbody tr.channel-table-row > td { |
| height: auto; |
| } |
|
|
| .channel-table tbody tr { |
| display: grid; |
| grid-template-columns: repeat(2, minmax(0, 1fr)); |
| gap: 10px 12px; |
| padding: 14px; |
| border: 1px solid rgba(148, 163, 184, 0.22); |
| border-radius: 16px; |
| background: rgba(255, 255, 255, 0.98); |
| box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06); |
| position: relative; |
| } |
|
|
| .channel-table tbody td { |
| display: block; |
| width: auto !important; |
| min-width: 0 !important; |
| max-width: none !important; |
| height: auto; |
| padding: 0; |
| border: none; |
| text-align: left !important; |
| } |
|
|
| .channel-table td[data-mobile-label]::before { |
| content: attr(data-mobile-label); |
| display: block; |
| margin-bottom: 6px; |
| color: var(--neutral-500); |
| font-size: 12px; |
| font-weight: 700; |
| letter-spacing: 0.02em; |
| } |
|
|
| .channel-table .ch-col-checkbox { |
| position: absolute; |
| top: 14px; |
| right: 14px; |
| width: auto !important; |
| text-align: right; |
| z-index: 1; |
| } |
|
|
| .channel-table .ch-col-checkbox input { |
| width: 18px; |
| height: 18px; |
| margin: 0; |
| } |
|
|
| .channel-table .ch-col-name, |
| .channel-table .ch-col-models, |
| .channel-table .ch-col-actions { |
| grid-column: 1 / -1; |
| } |
|
|
| .channel-table .ch-col-priority { |
| order: 10; |
| } |
|
|
| .channel-table .ch-col-cost { |
| order: 12; |
| grid-column: 1 / -1; |
| } |
|
|
| .channel-table .ch-col-last-success { |
| order: 13; |
| grid-column: 1 / -1; |
| } |
|
|
| .channel-table .ch-col-duration { |
| order: 20; |
| } |
|
|
| .channel-table .ch-col-usage { |
| order: 21; |
| } |
|
|
| .channel-table .ch-col-enabled { |
| order: 11; |
| } |
|
|
| .channel-table .ch-col-actions { |
| order: 30; |
| } |
|
|
| .channel-table .ch-col-name { |
| padding-right: 0; |
| } |
|
|
| .channel-table .ch-col-priority, |
| .channel-table .ch-col-duration, |
| .channel-table .ch-col-usage, |
| .channel-table .ch-col-cost, |
| .channel-table .ch-col-last-success, |
| .channel-table .ch-col-enabled { |
| background: rgba(248, 250, 252, 0.9); |
| border: 1px solid var(--neutral-200); |
| border-radius: 12px; |
| padding: 10px 12px; |
| } |
|
|
| .channel-table .ch-col-priority, |
| .channel-table .ch-col-cost, |
| .channel-table .ch-col-last-success, |
| .channel-table .ch-col-enabled { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 12px; |
| } |
|
|
| .channel-table .ch-col-priority::before, |
| .channel-table .ch-col-cost::before, |
| .channel-table .ch-col-last-success::before, |
| .channel-table .ch-col-enabled::before { |
| margin-bottom: 0; |
| flex: 0 0 auto; |
| } |
|
|
| .channel-table .ch-col-priority .ch-priority-stack, |
| .channel-table .ch-col-cost .cost-stack { |
| margin-left: auto; |
| } |
|
|
| .channel-table .ch-col-priority .ch-priority-editor-wrap { |
| flex: 0 0 auto; |
| } |
|
|
| .channel-table .ch-col-last-success .ch-last-status { |
| margin-left: 0; |
| align-items: flex-end; |
| max-width: min(100%, 420px); |
| } |
|
|
| .channel-table .ch-col-last-success .ch-last-request-slot { |
| display: flex; |
| justify-content: flex-end; |
| min-width: 0; |
| max-width: min(65%, 420px); |
| margin-top: 0; |
| margin-left: auto; |
| } |
|
|
| .channel-table .ch-last-request-slot--desktop { |
| display: none; |
| } |
|
|
| .channel-table .ch-last-request-slot--mobile { |
| display: flex; |
| } |
|
|
| .channel-table .ch-col-last-success .ch-last-request { |
| max-width: 100%; |
| min-width: 0; |
| } |
|
|
| .channel-table .ch-col-priority .ch-priority-stack { |
| width: auto; |
| min-width: 0; |
| } |
|
|
| .channel-table .ch-col-actions { |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| margin-top: 2px; |
| padding-top: 10px; |
| border-top: 1px solid var(--neutral-200); |
| } |
|
|
| .channel-table td.ch-col-actions::before { |
| content: none; |
| display: none; |
| } |
|
|
| .inline-key-table .inline-key-row { |
| height: auto !important; |
| } |
|
|
| .inline-url-table tbody .mobile-inline-row { |
| grid-template-columns: 36px minmax(0, 1fr) auto auto; |
| align-items: center; |
| gap: 8px 4px; |
| } |
|
|
| .inline-key-table tbody .mobile-inline-row { |
| grid-template-columns: 36px minmax(0, 1fr) auto auto; |
| align-items: center; |
| padding: 10px 12px; |
| gap: 6px 8px; |
| } |
|
|
| .inline-url-table tbody .mobile-inline-row td.inline-url-col-select, |
| .inline-key-table tbody .mobile-inline-row td.inline-key-col-select { |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| gap: 6px; |
| grid-column: 1; |
| grid-row: 1; |
| } |
|
|
| .inline-url-table tbody .mobile-inline-row td.inline-url-col-url { |
| order: 2; |
| grid-column: 2; |
| grid-row: 1; |
| display: flex; |
| align-items: center; |
| min-width: 0; |
| } |
|
|
| .inline-url-table tbody .mobile-inline-row td.inline-url-col-status { |
| order: 10; |
| grid-column: 2; |
| grid-row: 2; |
| display: flex; |
| align-items: center; |
| gap: 0; |
| justify-content: flex-start; |
| min-width: 0; |
| } |
|
|
| .inline-url-table tbody .mobile-inline-row td.inline-url-col-latency { |
| order: 11; |
| grid-column: 3; |
| grid-row: 2; |
| display: flex; |
| align-items: center; |
| gap: 0; |
| justify-content: flex-end; |
| min-width: 0; |
| text-align: right !important; |
| } |
|
|
| .inline-url-table tbody .mobile-inline-row td.inline-url-col-requests { |
| order: 12; |
| grid-column: 4; |
| grid-row: 2; |
| display: flex; |
| align-items: center; |
| gap: 0; |
| justify-content: flex-end; |
| min-width: 0; |
| text-align: right !important; |
| } |
|
|
| .inline-url-table tbody .mobile-inline-row td.inline-url-col-latency, |
| .inline-url-table tbody .mobile-inline-row td.inline-url-col-requests { |
| min-width: 0; |
| } |
|
|
| .inline-url-table tbody .mobile-inline-row td.inline-url-col-actions { |
| order: 3; |
| grid-column: 3; |
| grid-row: 1; |
| display: flex; |
| align-items: center; |
| justify-content: flex-end; |
| padding-top: 0; |
| border-top: none; |
| text-align: right !important; |
| } |
|
|
| .inline-url-table tbody .mobile-inline-row td.inline-url-col-toggle { |
| order: 4; |
| grid-column: 4; |
| grid-row: 1; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| padding-top: 0; |
| border-top: none; |
| } |
|
|
| .inline-url-table tbody .mobile-inline-row td.inline-url-col-url::before, |
| .inline-url-table tbody .mobile-inline-row td.inline-url-col-status::before, |
| .inline-url-table tbody .mobile-inline-row td.inline-url-col-latency::before, |
| .inline-url-table tbody .mobile-inline-row td.inline-url-col-requests::before, |
| .inline-url-table tbody .mobile-inline-row td.inline-url-col-actions::before, |
| .inline-url-table tbody .mobile-inline-row td.inline-url-col-toggle::before { |
| content: none; |
| display: none; |
| } |
|
|
| .inline-url-table tbody .mobile-inline-row td.inline-url-col-status .inline-url-status-badge { |
| padding: 0; |
| background: transparent; |
| font-size: 0; |
| line-height: 0; |
| gap: 0; |
| } |
|
|
| .inline-url-table .inline-url-actions { |
| justify-content: flex-end; |
| flex-wrap: nowrap; |
| overflow-x: auto; |
| margin-left: auto; |
| } |
|
|
| .inline-key-table tbody .mobile-inline-row td.inline-key-col-key { |
| order: 2; |
| grid-column: 2 / 3; |
| grid-row: 1; |
| display: flex; |
| align-items: center; |
| min-width: 0; |
| } |
|
|
| .inline-key-table tbody .mobile-inline-row td.inline-key-col-status { |
| order: 4; |
| grid-column: 4; |
| grid-row: 1; |
| display: flex; |
| align-items: center; |
| gap: 6px; |
| justify-content: flex-end; |
| white-space: nowrap; |
| min-width: 0; |
| text-align: right !important; |
| } |
|
|
| .inline-key-table tbody .mobile-inline-row td.inline-key-col-actions { |
| order: 3; |
| grid-column: 3; |
| grid-row: 1; |
| display: flex; |
| align-items: center; |
| justify-content: flex-end; |
| padding-top: 0; |
| border-top: none; |
| text-align: right !important; |
| } |
|
|
| .inline-key-table tbody .mobile-inline-row td.inline-key-col-key::before, |
| .inline-key-table tbody .mobile-inline-row td.inline-key-col-status::before, |
| .inline-key-table tbody .mobile-inline-row td.inline-key-col-actions::before { |
| content: none; |
| display: none; |
| } |
|
|
| .inline-key-table .inline-key-actions { |
| justify-content: flex-end; |
| flex-wrap: nowrap; |
| overflow-x: auto; |
| margin-left: auto; |
| } |
|
|
| .redirect-model-table tbody .mobile-inline-row { |
| grid-template-columns: 36px minmax(0, 1fr) auto; |
| align-items: center; |
| gap: 8px 12px; |
| } |
|
|
| .redirect-model-table .mobile-inline-row .redirect-col-select { |
| grid-column: 1; |
| grid-row: 1; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| gap: 6px; |
| } |
|
|
| .redirect-model-table .mobile-inline-row .redirect-col-model { |
| order: 2; |
| grid-column: 2 / 4; |
| grid-row: 1; |
| min-width: 0; |
| } |
|
|
| .redirect-model-table .mobile-inline-row .redirect-col-target { |
| order: 3; |
| grid-column: 2 / 3; |
| grid-row: 2; |
| display: block; |
| min-width: 0; |
| } |
|
|
| .redirect-model-table .mobile-inline-row .redirect-col-actions { |
| order: 10; |
| grid-column: 3; |
| grid-row: 2; |
| justify-content: flex-end; |
| padding-top: 0; |
| border-top: none; |
| text-align: right !important; |
| } |
|
|
| .inline-url-table .mobile-inline-row td[data-mobile-label]::before, |
| .inline-key-table .mobile-inline-row td[data-mobile-label]::before, |
| .redirect-model-table .mobile-inline-row td[data-mobile-label]::before { |
| display: inline-flex; |
| width: auto; |
| margin: 0 8px 0 0; |
| flex: 0 0 auto; |
| white-space: nowrap; |
| } |
|
|
| .inline-url-table .mobile-inline-row .inline-url-col-url, |
| .inline-key-table .mobile-inline-row .inline-key-col-key, |
| .inline-key-table .mobile-inline-row .inline-key-col-status, |
| .redirect-model-table .mobile-inline-row .redirect-col-model, |
| .redirect-model-table .mobile-inline-row .redirect-col-target, |
| .inline-url-table .mobile-inline-row .inline-url-col-actions, |
| .inline-key-table .mobile-inline-row .inline-key-col-actions, |
| .redirect-model-table .mobile-inline-row .redirect-col-actions { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| } |
|
|
| .redirect-model-table .mobile-inline-row td.redirect-col-model[data-mobile-label]::before, |
| .redirect-model-table .mobile-inline-row td.redirect-col-target[data-mobile-label]::before, |
| .redirect-model-table .mobile-inline-row td.redirect-col-actions[data-mobile-label]::before { |
| content: none; |
| display: none; |
| } |
|
|
| .inline-url-table .mobile-inline-row .inline-url-col-url .modal-inline-input, |
| .inline-key-table .mobile-inline-row .inline-key-col-key .modal-inline-input, |
| .redirect-model-table .mobile-inline-row .redirect-col-target .modal-inline-input { |
| display: block; |
| width: 100% !important; |
| min-width: 0; |
| } |
|
|
| .redirect-model-table .mobile-inline-row .redirect-col-model > div { |
| flex: 1 1 auto; |
| min-width: 0; |
| } |
|
|
| .redirect-model-table .mobile-inline-row .redirect-col-model .redirect-from-input { |
| flex: 1 1 auto; |
| min-width: 0; |
| } |
|
|
| .inline-url-table .mobile-inline-row .inline-url-col-actions .inline-url-actions, |
| .inline-key-table .mobile-inline-row .inline-key-col-actions .inline-key-actions, |
| .redirect-model-table .mobile-inline-row .redirect-col-actions .redirect-delete-btn { |
| margin-left: auto; |
| } |
|
|
| .channel-table td.ch-mobile-empty { |
| display: none; |
| } |
|
|
| .channel-table .ch-name-line { |
| flex-wrap: wrap; |
| align-items: flex-start; |
| gap: 6px; |
| } |
|
|
| .channel-table .ch-name-statuses { |
| margin-left: 0; |
| width: 100%; |
| } |
|
|
| .channel-table .ch-url-line { |
| white-space: normal; |
| overflow: visible; |
| text-overflow: unset; |
| word-break: break-all; |
| } |
|
|
| .channel-table .channel-refresh-result { |
| width: 100%; |
| } |
|
|
| .channel-table .channel-refresh-result__summary { |
| white-space: normal; |
| } |
|
|
| .channel-table .ch-models-text { |
| -webkit-line-clamp: 3; |
| line-clamp: 3; |
| word-break: break-word; |
| } |
|
|
| .channel-table .ch-action-group { |
| display: flex; |
| flex-wrap: nowrap; |
| gap: 6px; |
| overflow-x: auto; |
| padding-bottom: 2px; |
| justify-content: center; |
| margin: 0 auto; |
| max-width: 100%; |
| } |
|
|
| .channel-table .ch-actions-stack { |
| flex-direction: column; |
| align-items: center; |
| justify-content: flex-start; |
| gap: 6px; |
| min-height: 0; |
| padding-top: 0; |
| } |
|
|
| .channel-table .ch-action-statuses { |
| position: static; |
| justify-content: center; |
| pointer-events: auto; |
| } |
|
|
| .channel-table .ch-action-group::-webkit-scrollbar { |
| display: none; |
| } |
|
|
| .channel-table .ch-action-group .btn-icon { |
| flex: 0 0 auto; |
| width: 32px; |
| height: 32px; |
| padding: 0; |
| } |
|
|
| .channel-table .health-indicator { |
| max-width: 100%; |
| overflow: hidden; |
| } |
|
|
| .channel-table .health-track { |
| width: min(100%, 335px); |
| min-width: 0; |
| flex: 1 1 auto; |
| } |
|
|
| .channel-filter-summary { |
| order: 5; |
| width: 100%; |
| display: grid; |
| grid-template-columns: minmax(0, 1fr) auto; |
| gap: 8px; |
| align-items: center; |
| } |
|
|
| .channel-filter-summary .filter-info { |
| width: auto; |
| min-width: 0; |
| margin: 0; |
| text-align: left; |
| } |
|
|
| .channel-toolbar-actions { |
| justify-content: flex-end; |
| flex-wrap: nowrap; |
| } |
|
|
| .channel-filter-summary .btn { |
| width: auto; |
| min-width: 0; |
| white-space: nowrap; |
| } |
|
|
| .channel-selection-toggle { |
| width: auto; |
| justify-content: flex-start; |
| } |
|
|
| |
| .logs-pagination-card .pagination-controls { |
| flex-direction: row; |
| flex-wrap: wrap; |
| justify-content: center; |
| gap: 6px; |
| } |
|
|
| .logs-pagination-card .logs-pagination-info { |
| width: 100%; |
| margin: 0; |
| order: 3; |
| justify-content: center; |
| } |
|
|
| .logs-pagination-card .logs-pagination-separator { |
| display: none; |
| } |
|
|
| .pagination-page-size-control { |
| order: 4; |
| width: 100%; |
| justify-content: center; |
| margin-top: 4px; |
| } |
|
|
| .channel-batch-float { |
| width: min(320px, calc(100vw - 16px)); |
| max-width: calc(100vw - 16px); |
| bottom: 10px; |
| } |
|
|
| .channel-batch-float__content { |
| position: relative; |
| flex-direction: column; |
| gap: 8px; |
| align-items: stretch; |
| padding: 12px 12px 10px; |
| border-radius: var(--radius-lg); |
| } |
|
|
| .channel-batch-float__header { |
| width: 100%; |
| min-width: 0; |
| padding-right: 34px; |
| } |
|
|
| .channel-batch-selection { |
| width: 100%; |
| min-width: 0; |
| } |
|
|
| .channel-batch-count-badge { |
| width: 24px; |
| height: 24px; |
| font-size: 0.8rem; |
| } |
|
|
| .channel-batch-summary { |
| font-size: 0.85rem; |
| } |
|
|
| .channel-batch-divider { |
| display: none; |
| } |
|
|
| .channel-batch-actions { |
| width: 100%; |
| align-self: stretch; |
| display: grid; |
| grid-template-columns: repeat(2, minmax(0, 1fr)); |
| gap: 8px; |
| } |
|
|
| .channel-batch-action { |
| width: 100%; |
| min-width: 0; |
| min-height: 40px; |
| padding: 8px 6px; |
| font-size: 0.75rem; |
| white-space: nowrap; |
| text-align: center; |
| line-height: 1.2; |
| } |
|
|
| .channel-batch-close { |
| position: absolute; |
| top: 10px; |
| right: 10px; |
| margin-left: 0; |
| width: 26px; |
| height: 26px; |
| } |
| } |
|
|
| @media (max-width: 480px) { |
| .channel-table tbody tr { |
| gap: 8px 10px; |
| padding: 12px; |
| } |
| } |
|
|
| |
| |
| |
| .custom-rules-modal { |
| max-width: 760px; |
| width: 92%; |
| } |
|
|
| .custom-rules-tabs { |
| display: flex; |
| gap: 4px; |
| border-bottom: 1px solid var(--border-color, #e2e8f0); |
| margin-bottom: 12px; |
| } |
|
|
| .custom-rules-tab-button { |
| display: inline-flex; |
| align-items: center; |
| gap: 6px; |
| background: transparent; |
| border: none; |
| border-bottom: 2px solid transparent; |
| padding: 8px 14px; |
| cursor: pointer; |
| color: var(--text-600, #475569); |
| font-size: 0.9rem; |
| transition: color 0.15s, border-color 0.15s; |
| } |
|
|
| .custom-rules-tab-button:hover { |
| color: var(--primary-600, #2563eb); |
| } |
|
|
| .custom-rules-tab-button.active { |
| color: var(--primary-600, #2563eb); |
| border-bottom-color: var(--primary-600, #2563eb); |
| font-weight: 600; |
| } |
|
|
| .custom-rules-tab-count { |
| font-size: 0.8rem; |
| color: var(--text-500, #64748b); |
| } |
|
|
| .custom-rules-help-icon { |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| width: 18px; |
| height: 18px; |
| border-radius: 50%; |
| border: 1px solid currentColor; |
| font-size: 0.72rem; |
| font-weight: 600; |
| line-height: 1; |
| cursor: help; |
| opacity: 0.6; |
| transition: opacity 0.15s; |
| } |
|
|
| .custom-rules-help-icon:hover { |
| opacity: 1; |
| } |
|
|
| .custom-rules-help-popup { |
| position: relative; |
| background: var(--info-50, #eff6ff); |
| border: 1px solid var(--info-200, #bfdbfe); |
| border-radius: 6px; |
| padding: 12px 14px; |
| margin-bottom: 12px; |
| font-size: 0.82rem; |
| } |
|
|
| .custom-rules-help-popup pre { |
| margin: 0 0 8px 0; |
| white-space: pre-wrap; |
| word-break: break-word; |
| font-family: inherit; |
| font-size: 0.82rem; |
| line-height: 1.55; |
| color: var(--text-700, #334155); |
| } |
|
|
| .custom-rules-panel { |
| display: flex; |
| flex-direction: column; |
| gap: 8px; |
| } |
|
|
| .custom-rules-panel.hidden { |
| display: none; |
| } |
|
|
| .custom-rules-list { |
| display: flex; |
| flex-direction: column; |
| gap: 6px; |
| max-height: 360px; |
| overflow-y: auto; |
| padding-right: 4px; |
| } |
|
|
| .custom-rules-empty { |
| color: var(--text-500, #64748b); |
| font-size: 0.85rem; |
| padding: 18px 8px; |
| text-align: center; |
| border: 1px dashed var(--border-color, #e2e8f0); |
| border-radius: 6px; |
| } |
|
|
| .custom-rules-row { |
| display: grid; |
| grid-template-columns: 110px 1fr 1.4fr 36px; |
| gap: 6px; |
| align-items: center; |
| } |
|
|
| .custom-rules-row .form-input { |
| min-width: 0; |
| } |
|
|
| .custom-rules-value-disabled { |
| background: var(--bg-disabled, #f1f5f9); |
| color: var(--text-400, #94a3b8); |
| cursor: not-allowed; |
| } |
|
|
| .custom-rules-remove-btn { |
| padding: 6px 0; |
| font-size: 1rem; |
| line-height: 1; |
| min-width: 36px; |
| } |
|
|
| .custom-rules-add-btn { |
| align-self: flex-start; |
| font-size: 0.85rem; |
| } |
|
|
| .custom-rules-error { |
| background: var(--error-50, #fef2f2); |
| color: var(--error-700, #b91c1c); |
| border: 1px solid var(--error-200, #fecaca); |
| border-radius: 6px; |
| padding: 8px 12px; |
| font-size: 0.82rem; |
| line-height: 1.55; |
| margin-bottom: 10px; |
| } |
|
|
| .custom-rules-anyrouter-hint { |
| background: var(--info-50, #eff6ff); |
| color: var(--info-700, #1d4ed8); |
| border: 1px solid var(--info-200, #bfdbfe); |
| border-radius: 6px; |
| padding: 8px 12px; |
| font-size: 0.82rem; |
| line-height: 1.55; |
| margin-bottom: 10px; |
| } |
|
|
| .custom-rules-anyrouter-hint-title { |
| font-weight: 600; |
| margin-bottom: 4px; |
| } |
|
|
| .custom-rules-anyrouter-hint-list { |
| margin: 0; |
| padding-left: 18px; |
| } |
|
|
| .custom-rules-anyrouter-hint-list li { |
| margin-bottom: 2px; |
| } |
|
|
| .custom-rules-footer { |
| display: flex; |
| justify-content: flex-end; |
| gap: 8px; |
| margin-top: 12px; |
| } |
|
|
| @media (max-width: 640px) { |
| .custom-rules-modal .modal-title { |
| font-size: 1rem; |
| } |
| .custom-rules-tab-button { |
| font-size: 0.8rem; |
| padding: 6px 10px; |
| } |
| .custom-rules-tab-count { |
| font-size: 0.72rem; |
| } |
| .custom-rules-modal .form-input { |
| font-size: 0.85rem; |
| padding: 6px 10px; |
| } |
| .custom-rules-modal select.form-input { |
| font-size: 0.85rem; |
| } |
| .custom-rules-help-popup, |
| .custom-rules-help-popup pre { |
| font-size: 0.75rem; |
| } |
| .custom-rules-empty { |
| font-size: 0.78rem; |
| } |
| .custom-rules-add-btn, |
| .custom-rules-footer .btn { |
| font-size: 0.82rem; |
| padding: 6px 14px; |
| } |
| .custom-rules-row { |
| grid-template-columns: 1fr 1fr; |
| grid-template-areas: |
| "action remove" |
| "primary primary" |
| "value value"; |
| gap: 6px; |
| } |
| .custom-rules-row .custom-rules-action { grid-area: action; } |
| .custom-rules-row .custom-rules-primary { grid-area: primary; } |
| .custom-rules-row .custom-rules-value { grid-area: value; } |
| .custom-rules-row .custom-rules-remove-btn { grid-area: remove; justify-self: end; } |
| } |
|
|
