|
|
|
|
|
|
|
|
.explorer-layout { |
|
|
display: grid; |
|
|
grid-template-columns: 1fr 1fr; |
|
|
gap: var(--space-4); |
|
|
margin-bottom: var(--space-4); |
|
|
} |
|
|
|
|
|
.request-panel, |
|
|
.response-panel, |
|
|
.history-panel { |
|
|
background: var(--surface-glass); |
|
|
border: 1px solid var(--border-subtle); |
|
|
border-radius: var(--radius-lg); |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.panel-header { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: space-between; |
|
|
padding: var(--space-3) var(--space-4); |
|
|
background: var(--surface-elevated); |
|
|
border-bottom: 1px solid var(--border-subtle); |
|
|
} |
|
|
|
|
|
.panel-header h3 { |
|
|
font-size: var(--font-size-md); |
|
|
font-weight: var(--font-weight-semibold); |
|
|
color: var(--text-strong); |
|
|
margin: 0; |
|
|
} |
|
|
|
|
|
.panel-body { |
|
|
padding: var(--space-4); |
|
|
} |
|
|
|
|
|
.form-group { |
|
|
margin-bottom: var(--space-4); |
|
|
} |
|
|
|
|
|
.form-group label { |
|
|
display: block; |
|
|
font-size: var(--font-size-sm); |
|
|
font-weight: var(--font-weight-medium); |
|
|
color: var(--text-secondary); |
|
|
margin-bottom: var(--space-2); |
|
|
} |
|
|
|
|
|
.form-textarea { |
|
|
width: 100%; |
|
|
font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace; |
|
|
font-size: var(--font-size-sm); |
|
|
padding: var(--space-3); |
|
|
background: var(--surface-base); |
|
|
border: 1px solid var(--border-subtle); |
|
|
border-radius: var(--radius-md); |
|
|
color: var(--text-primary); |
|
|
resize: vertical; |
|
|
} |
|
|
|
|
|
.form-textarea:focus { |
|
|
outline: none; |
|
|
border-color: var(--color-primary); |
|
|
} |
|
|
|
|
|
.btn-block { |
|
|
width: 100%; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
gap: var(--space-2); |
|
|
} |
|
|
|
|
|
.response-meta { |
|
|
display: flex; |
|
|
gap: var(--space-3); |
|
|
} |
|
|
|
|
|
.response-meta .status { |
|
|
font-size: var(--font-size-sm); |
|
|
font-weight: var(--font-weight-medium); |
|
|
padding: var(--space-1) var(--space-2); |
|
|
border-radius: var(--radius-sm); |
|
|
background: var(--surface-base); |
|
|
} |
|
|
|
|
|
.response-meta .status.status-success { |
|
|
color: var(--color-success); |
|
|
background: var(--color-success-alpha); |
|
|
} |
|
|
|
|
|
.response-meta .status.status-error { |
|
|
color: var(--color-danger); |
|
|
background: var(--color-danger-alpha); |
|
|
} |
|
|
|
|
|
.response-meta .status.status-loading { |
|
|
color: var(--color-primary); |
|
|
background: var(--color-primary-alpha); |
|
|
} |
|
|
|
|
|
.response-meta .time { |
|
|
font-size: var(--font-size-sm); |
|
|
color: var(--text-muted); |
|
|
} |
|
|
|
|
|
.response-content { |
|
|
background: var(--surface-base); |
|
|
border: 1px solid var(--border-subtle); |
|
|
border-radius: var(--radius-md); |
|
|
padding: var(--space-4); |
|
|
font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace; |
|
|
font-size: var(--font-size-sm); |
|
|
color: var(--text-secondary); |
|
|
overflow: auto; |
|
|
max-height: 400px; |
|
|
margin: 0; |
|
|
white-space: pre-wrap; |
|
|
word-break: break-word; |
|
|
} |
|
|
|
|
|
.response-actions { |
|
|
display: flex; |
|
|
gap: var(--space-2); |
|
|
margin-top: var(--space-3); |
|
|
justify-content: flex-end; |
|
|
} |
|
|
|
|
|
.response-actions .btn { |
|
|
display: inline-flex; |
|
|
align-items: center; |
|
|
gap: var(--space-1); |
|
|
} |
|
|
|
|
|
.history-panel { |
|
|
margin-top: var(--space-4); |
|
|
} |
|
|
|
|
|
.history-list { |
|
|
max-height: 200px; |
|
|
overflow-y: auto; |
|
|
} |
|
|
|
|
|
.history-item { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: var(--space-3); |
|
|
padding: var(--space-2) var(--space-4); |
|
|
border-bottom: 1px solid var(--border-subtle); |
|
|
transition: background 0.15s ease; |
|
|
} |
|
|
|
|
|
.history-item:hover { |
|
|
background: var(--surface-elevated); |
|
|
} |
|
|
|
|
|
.history-item:last-child { |
|
|
border-bottom: none; |
|
|
} |
|
|
|
|
|
.history-method { |
|
|
font-size: var(--font-size-xs); |
|
|
font-weight: var(--font-weight-bold); |
|
|
padding: var(--space-1) var(--space-2); |
|
|
border-radius: var(--radius-sm); |
|
|
min-width: 50px; |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.method-get { background: #10b98120; color: #10b981; } |
|
|
.method-post { background: #3b82f620; color: #3b82f6; } |
|
|
.method-put { background: #f59e0b20; color: #f59e0b; } |
|
|
.method-delete { background: #ef444420; color: #ef4444; } |
|
|
|
|
|
.history-endpoint { |
|
|
flex: 1; |
|
|
font-size: var(--font-size-sm); |
|
|
color: var(--text-secondary); |
|
|
white-space: nowrap; |
|
|
overflow: hidden; |
|
|
text-overflow: ellipsis; |
|
|
} |
|
|
|
|
|
.history-status { |
|
|
font-size: var(--font-size-xs); |
|
|
font-weight: var(--font-weight-medium); |
|
|
} |
|
|
|
|
|
.status-success { color: var(--color-success); } |
|
|
.status-error { color: var(--color-danger); } |
|
|
.status-loading { color: var(--color-primary); } |
|
|
|
|
|
@keyframes spin { |
|
|
to { transform: rotate(360deg); } |
|
|
} |
|
|
|
|
|
.spinner { |
|
|
animation: spin 1s linear infinite; |
|
|
} |
|
|
|
|
|
.history-time { |
|
|
font-size: var(--font-size-xs); |
|
|
color: var(--text-muted); |
|
|
min-width: 50px; |
|
|
text-align: right; |
|
|
} |
|
|
|
|
|
|
|
|
.toast { |
|
|
position: fixed; |
|
|
bottom: var(--space-4); |
|
|
right: var(--space-4); |
|
|
padding: var(--space-3) var(--space-4); |
|
|
background: var(--surface-elevated); |
|
|
border: 1px solid var(--border-subtle); |
|
|
border-radius: var(--radius-md); |
|
|
box-shadow: var(--shadow-lg); |
|
|
font-size: var(--font-size-sm); |
|
|
color: var(--text-primary); |
|
|
opacity: 0; |
|
|
transform: translateY(20px); |
|
|
transition: all 0.3s ease; |
|
|
z-index: 1000; |
|
|
} |
|
|
|
|
|
.toast.show { |
|
|
opacity: 1; |
|
|
transform: translateY(0); |
|
|
} |
|
|
|
|
|
.toast.toast-success { |
|
|
border-left: 3px solid var(--color-success); |
|
|
} |
|
|
|
|
|
.toast.toast-error { |
|
|
border-left: 3px solid var(--color-danger); |
|
|
} |
|
|
|
|
|
.empty-state { |
|
|
padding: var(--space-6); |
|
|
text-align: center; |
|
|
color: var(--text-muted); |
|
|
} |
|
|
|
|
|
.empty-state.error { |
|
|
color: var(--color-danger); |
|
|
} |
|
|
|
|
|
|
|
|
.providers-panel { |
|
|
background: var(--surface-glass); |
|
|
border: 1px solid var(--border-subtle); |
|
|
border-radius: var(--radius-lg); |
|
|
overflow: hidden; |
|
|
margin-bottom: var(--space-4); |
|
|
} |
|
|
|
|
|
.providers-stats { |
|
|
display: flex; |
|
|
gap: var(--space-2); |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.providers-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); |
|
|
gap: var(--space-3); |
|
|
padding: var(--space-4); |
|
|
max-height: 500px; |
|
|
overflow-y: auto; |
|
|
} |
|
|
|
|
|
.provider-card { |
|
|
background: var(--surface-elevated); |
|
|
border: 1px solid var(--border-subtle); |
|
|
border-radius: var(--radius-md); |
|
|
padding: var(--space-3); |
|
|
transition: all 0.2s ease; |
|
|
} |
|
|
|
|
|
.provider-card:hover { |
|
|
border-color: var(--color-primary); |
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); |
|
|
transform: translateY(-2px); |
|
|
} |
|
|
|
|
|
.provider-header { |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: start; |
|
|
margin-bottom: var(--space-3); |
|
|
gap: var(--space-2); |
|
|
} |
|
|
|
|
|
.provider-info { |
|
|
flex: 1; |
|
|
min-width: 0; |
|
|
} |
|
|
|
|
|
.provider-name { |
|
|
font-size: var(--font-size-md); |
|
|
font-weight: var(--font-weight-semibold); |
|
|
color: var(--text-strong); |
|
|
margin: 0 0 var(--space-1) 0; |
|
|
white-space: nowrap; |
|
|
overflow: hidden; |
|
|
text-overflow: ellipsis; |
|
|
} |
|
|
|
|
|
.provider-badges { |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
gap: var(--space-1); |
|
|
align-items: flex-end; |
|
|
} |
|
|
|
|
|
.badge-category { |
|
|
background: var(--color-primary-alpha); |
|
|
color: var(--color-primary); |
|
|
} |
|
|
|
|
|
.provider-body { |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
gap: var(--space-2); |
|
|
} |
|
|
|
|
|
.provider-url { |
|
|
font-size: var(--font-size-xs); |
|
|
font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace; |
|
|
color: var(--text-muted); |
|
|
background: var(--surface-base); |
|
|
padding: var(--space-2); |
|
|
border-radius: var(--radius-sm); |
|
|
word-break: break-all; |
|
|
} |
|
|
|
|
|
.provider-description { |
|
|
font-size: var(--font-size-sm); |
|
|
color: var(--text-secondary); |
|
|
line-height: 1.4; |
|
|
} |
|
|
|
|
|
.provider-meta { |
|
|
display: flex; |
|
|
gap: var(--space-3); |
|
|
font-size: var(--font-size-xs); |
|
|
color: var(--text-muted); |
|
|
} |
|
|
|
|
|
.provider-status { |
|
|
font-size: var(--font-size-xs); |
|
|
font-weight: var(--font-weight-medium); |
|
|
padding: var(--space-1) var(--space-2); |
|
|
border-radius: var(--radius-sm); |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.provider-status.status-success { |
|
|
color: var(--color-success); |
|
|
background: var(--color-success-alpha); |
|
|
} |
|
|
|
|
|
.provider-status.status-error { |
|
|
color: var(--color-danger); |
|
|
background: var(--color-danger-alpha); |
|
|
} |
|
|
|
|
|
.provider-status.status-warning { |
|
|
color: var(--color-warning); |
|
|
background: var(--color-warning-alpha); |
|
|
} |
|
|
|
|
|
.provider-status.status-unknown { |
|
|
color: var(--text-muted); |
|
|
background: var(--surface-base); |
|
|
} |
|
|
|
|
|
.provider-capabilities { |
|
|
display: flex; |
|
|
flex-wrap: wrap; |
|
|
gap: var(--space-1); |
|
|
margin-top: var(--space-2); |
|
|
} |
|
|
|
|
|
.capability-tag { |
|
|
font-size: var(--font-size-xs); |
|
|
padding: var(--space-1) var(--space-2); |
|
|
background: var(--surface-base); |
|
|
color: var(--text-secondary); |
|
|
border-radius: var(--radius-sm); |
|
|
border: 1px solid var(--border-subtle); |
|
|
} |
|
|
|
|
|
@media (max-width: 1024px) { |
|
|
.explorer-layout { |
|
|
grid-template-columns: 1fr; |
|
|
} |
|
|
|
|
|
.providers-grid { |
|
|
grid-template-columns: 1fr; |
|
|
} |
|
|
} |
|
|
|
