1474 lines
29 KiB
CSS
1474 lines
29 KiB
CSS
:root {
|
|
--accent: #6366f1; /* overridden inline per-instance */
|
|
--accent-ink: #ffffff;
|
|
--m-get: #34D399;
|
|
--m-post: #5B9CFF;
|
|
--m-put: #F5B947;
|
|
--m-patch: #C792EA;
|
|
--m-delete: #FB7185;
|
|
--m-default: #8A93A6;
|
|
--font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
|
--font-mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, Menlo, monospace;
|
|
--radius-sm: 5px;
|
|
--radius-md: 8px;
|
|
--radius-lg: 14px;
|
|
--nav-w: 288px;
|
|
--try-w: 432px;
|
|
--topbar-h: 58px;
|
|
--ease: cubic-bezier(0.16, 1, 0.3, 1);
|
|
}
|
|
|
|
[data-theme="dark"], [data-theme="auto"] {
|
|
--bg-0: #08090D;
|
|
--bg-1: #0E1015;
|
|
--bg-2: #15171E;
|
|
--bg-3: #1C1F28;
|
|
--bg-raised: #181B23;
|
|
--border: #232733;
|
|
--border-soft: #1A1D26;
|
|
--text-0: #EEF0F4;
|
|
--text-1: #9CA3B5;
|
|
--text-2: #696F80;
|
|
--code-bg: #0B0C10;
|
|
--shadow: 0 16px 48px rgba(0,0,0,0.55);
|
|
--glow-alpha: 0.16;
|
|
--grid-line: rgba(255,255,255,0.025);
|
|
}
|
|
|
|
[data-theme="light"] {
|
|
--bg-0: #FAFAFA;
|
|
--bg-1: #FFFFFF;
|
|
--bg-2: #F5F5F7;
|
|
--bg-3: #ECEDF1;
|
|
--bg-raised: #FFFFFF;
|
|
--border: #E5E6EB;
|
|
--border-soft: #EEEFF2;
|
|
--text-0: #14151A;
|
|
--text-1: #5B5F6B;
|
|
--text-2: #92959E;
|
|
--code-bg: #F5F5F7;
|
|
--shadow: 0 16px 48px rgba(20,21,26,0.10);
|
|
--glow-alpha: 0.08;
|
|
--grid-line: rgba(0,0,0,0.025);
|
|
}
|
|
|
|
@media (prefers-color-scheme: light) {
|
|
[data-theme="auto"] {
|
|
--bg-0: #FAFAFA;
|
|
--bg-1: #FFFFFF;
|
|
--bg-2: #F5F5F7;
|
|
--bg-3: #ECEDF1;
|
|
--bg-raised: #FFFFFF;
|
|
--border: #E5E6EB;
|
|
--border-soft: #EEEFF2;
|
|
--text-0: #14151A;
|
|
--text-1: #5B5F6B;
|
|
--text-2: #92959E;
|
|
--code-bg: #F5F5F7;
|
|
--shadow: 0 16px 48px rgba(20,21,26,0.10);
|
|
--glow-alpha: 0.08;
|
|
--grid-line: rgba(0,0,0,0.025);
|
|
}
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html, body {
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
background: var(--bg-0);
|
|
color: var(--text-0);
|
|
font-family: var(--font-ui);
|
|
font-size: 14px;
|
|
-webkit-font-smoothing: antialiased;
|
|
text-rendering: optimizeLegibility;
|
|
}
|
|
|
|
button {
|
|
font-family: inherit;
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
}
|
|
|
|
::selection {
|
|
background: color-mix(in srgb, var(--accent) 35%, transparent);
|
|
}
|
|
|
|
:focus-visible {
|
|
outline: 2px solid var(--accent);
|
|
outline-offset: 2px;
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
|
|
/* scrollbars */
|
|
* {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--border) transparent;
|
|
}
|
|
|
|
*::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
*::-webkit-scrollbar-thumb {
|
|
background: var(--border);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
*::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.app-shell {
|
|
height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
|
|
background-size: 28px 28px;
|
|
}
|
|
|
|
.topbar {
|
|
height: var(--topbar-h);
|
|
flex: 0 0 auto;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 22px;
|
|
padding: 0 20px;
|
|
border-bottom: 1px solid var(--border);
|
|
background: color-mix(in srgb, var(--bg-1) 92%, transparent);
|
|
backdrop-filter: blur(10px);
|
|
position: relative;
|
|
z-index: 30;
|
|
}
|
|
|
|
.topbar-brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
min-width: 160px;
|
|
}
|
|
|
|
.brand-mark {
|
|
width: 26px;
|
|
height: 26px;
|
|
flex: 0 0 auto;
|
|
border-radius: 7px;
|
|
background: linear-gradient(155deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #000 15%));
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent), 0 4px 14px color-mix(in srgb, var(--accent) var(--glow-alpha), transparent);
|
|
}
|
|
|
|
.brand-mark svg {
|
|
width: 15px;
|
|
height: 15px;
|
|
color: var(--accent-ink);
|
|
}
|
|
|
|
.brand-title {
|
|
font-weight: 650;
|
|
font-size: 15px;
|
|
letter-spacing: -0.01em;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.brand-version {
|
|
font-family: var(--font-mono);
|
|
font-size: 10.5px;
|
|
color: var(--text-2);
|
|
background: var(--bg-3);
|
|
border: 1px solid var(--border);
|
|
padding: 1px 6px;
|
|
border-radius: 20px;
|
|
margin-left: 2px;
|
|
}
|
|
|
|
.topbar-search {
|
|
flex: 1 1 auto;
|
|
max-width: 480px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 9px;
|
|
background: var(--bg-2);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
padding: 0 11px;
|
|
height: 36px;
|
|
color: var(--text-2);
|
|
transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
|
|
}
|
|
|
|
.topbar-search:focus-within {
|
|
border-color: var(--accent);
|
|
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
|
|
}
|
|
|
|
.search-icon {
|
|
width: 15px;
|
|
height: 15px;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.topbar-search input {
|
|
flex: 1 1 auto;
|
|
background: transparent;
|
|
border: none;
|
|
outline: none;
|
|
color: var(--text-0);
|
|
font-size: 13.5px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.topbar-search input::placeholder {
|
|
color: var(--text-2);
|
|
}
|
|
|
|
.topbar-search kbd {
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
color: var(--text-2);
|
|
background: var(--bg-3);
|
|
border: 1px solid var(--border);
|
|
border-radius: 4px;
|
|
padding: 1px 5px;
|
|
}
|
|
|
|
.topbar-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.icon-btn {
|
|
width: 34px;
|
|
height: 34px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: transparent;
|
|
border: 1px solid transparent;
|
|
border-radius: var(--radius-md);
|
|
color: var(--text-1);
|
|
cursor: pointer;
|
|
transition: background .12s ease, border-color .12s ease, color .12s ease;
|
|
}
|
|
|
|
.icon-btn:hover {
|
|
background: var(--bg-2);
|
|
border-color: var(--border);
|
|
color: var(--text-0);
|
|
}
|
|
|
|
.icon-btn svg {
|
|
width: 17px;
|
|
height: 17px;
|
|
}
|
|
|
|
.icon-moon {
|
|
display: none;
|
|
}
|
|
|
|
[data-theme="light"] .icon-sun {
|
|
display: none;
|
|
}
|
|
|
|
[data-theme="light"] .icon-moon {
|
|
display: block;
|
|
}
|
|
|
|
.text-link {
|
|
font-family: var(--font-mono);
|
|
font-size: 12px;
|
|
color: var(--text-2);
|
|
text-decoration: none;
|
|
border: 1px solid var(--border);
|
|
padding: 6px 10px;
|
|
border-radius: var(--radius-md);
|
|
transition: color .12s ease, border-color .12s ease;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.text-link:hover {
|
|
color: var(--text-0);
|
|
border-color: var(--text-2);
|
|
}
|
|
|
|
.body-grid {
|
|
flex: 1 1 auto;
|
|
display: grid;
|
|
grid-template-columns: var(--nav-w) 1fr var(--try-w);
|
|
min-height: 0;
|
|
}
|
|
|
|
/* Nav pane (left) */
|
|
.nav-pane {
|
|
border-right: 1px solid var(--border);
|
|
background: color-mix(in srgb, var(--bg-1) 96%, transparent);
|
|
overflow-y: auto;
|
|
min-width: 0;
|
|
position: relative;
|
|
}
|
|
|
|
.nav-content {
|
|
padding: 16px 10px 40px;
|
|
}
|
|
|
|
.nav-overview-link {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 9px;
|
|
width: 100%;
|
|
background: transparent;
|
|
border: 1px solid transparent;
|
|
padding: 8px 10px;
|
|
margin-bottom: 14px;
|
|
color: var(--text-1);
|
|
font-weight: 600;
|
|
font-size: 12.5px;
|
|
cursor: pointer;
|
|
border-radius: var(--radius-sm);
|
|
text-align: left;
|
|
}
|
|
|
|
.nav-overview-link svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
flex: 0 0 auto;
|
|
color: var(--text-2);
|
|
}
|
|
|
|
.nav-overview-link:hover {
|
|
background: var(--bg-2);
|
|
color: var(--text-0);
|
|
}
|
|
|
|
.nav-overview-link.active {
|
|
background: var(--bg-3);
|
|
color: var(--text-0);
|
|
border-color: var(--border);
|
|
}
|
|
|
|
.nav-group {
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.nav-group-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 7px;
|
|
width: 100%;
|
|
background: transparent;
|
|
border: none;
|
|
padding: 8px 8px;
|
|
color: var(--text-1);
|
|
font-weight: 650;
|
|
font-size: 11.5px;
|
|
letter-spacing: 0.05em;
|
|
text-transform: uppercase;
|
|
cursor: pointer;
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
|
|
.nav-group-header:hover {
|
|
color: var(--text-0);
|
|
background: var(--bg-2);
|
|
}
|
|
|
|
.nav-group-header .chev {
|
|
width: 11px;
|
|
height: 11px;
|
|
transition: transform .18s var(--ease);
|
|
flex: 0 0 auto;
|
|
color: var(--text-2);
|
|
}
|
|
|
|
.nav-group.collapsed .chev {
|
|
transform: rotate(-90deg);
|
|
}
|
|
|
|
.nav-group.collapsed .nav-endpoints {
|
|
display: none;
|
|
}
|
|
|
|
.nav-group-count {
|
|
margin-left: auto;
|
|
font-family: var(--font-mono);
|
|
font-size: 10.5px;
|
|
color: var(--text-2);
|
|
background: var(--bg-3);
|
|
border-radius: 20px;
|
|
padding: 1px 6px;
|
|
}
|
|
|
|
.nav-endpoints {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1px;
|
|
padding: 2px 0 10px;
|
|
position: relative;
|
|
}
|
|
|
|
.nav-endpoint {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 9px;
|
|
padding: 7px 8px 7px 10px;
|
|
border-radius: var(--radius-sm);
|
|
border: none;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
text-align: left;
|
|
width: 100%;
|
|
position: relative;
|
|
transition: background .1s ease;
|
|
}
|
|
|
|
.nav-endpoint::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
top: 4px;
|
|
bottom: 4px;
|
|
width: 3px;
|
|
border-radius: 3px;
|
|
background: var(--method-color, var(--text-2));
|
|
opacity: 0;
|
|
transition: opacity .12s ease;
|
|
}
|
|
|
|
.nav-endpoint:hover {
|
|
background: var(--bg-2);
|
|
}
|
|
|
|
.nav-endpoint.active {
|
|
background: var(--bg-3);
|
|
}
|
|
|
|
.nav-endpoint.active::before {
|
|
opacity: 1;
|
|
}
|
|
|
|
.method-tag {
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.02em;
|
|
color: var(--method-color, var(--text-2));
|
|
width: 36px;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.nav-endpoint-path {
|
|
font-family: var(--font-mono);
|
|
font-size: 12px;
|
|
color: var(--text-1);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.nav-endpoint.active .nav-endpoint-path {
|
|
color: var(--text-0);
|
|
}
|
|
|
|
.nav-endpoint.deprecated .nav-endpoint-path {
|
|
text-decoration: line-through;
|
|
color: var(--text-2);
|
|
}
|
|
|
|
.nav-empty {
|
|
padding: 30px 14px;
|
|
color: var(--text-2);
|
|
font-size: 12.5px;
|
|
text-align: center;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* Detail pane (middle) */
|
|
.detail-pane {
|
|
overflow-y: auto;
|
|
min-width: 0;
|
|
background: var(--bg-0);
|
|
}
|
|
|
|
.detail-content {
|
|
max-width: 800px;
|
|
padding: 0 36px 90px;
|
|
}
|
|
|
|
/* Welcome / overview screen */
|
|
.overview-hero {
|
|
padding: 56px 0 36px;
|
|
border-bottom: 1px solid var(--border-soft);
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.overview-eyebrow {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 7px;
|
|
font-family: var(--font-mono);
|
|
font-size: 11.5px;
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
color: var(--accent);
|
|
background: color-mix(in srgb, var(--accent) 12%, transparent);
|
|
border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
|
|
padding: 4px 10px;
|
|
border-radius: 20px;
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
.overview-eyebrow svg {
|
|
width: 12px;
|
|
height: 12px;
|
|
}
|
|
|
|
.overview-title {
|
|
font-size: 34px;
|
|
font-weight: 700;
|
|
letter-spacing: -0.02em;
|
|
margin: 0 0 12px;
|
|
line-height: 1.15;
|
|
}
|
|
|
|
.overview-desc {
|
|
font-size: 15px;
|
|
color: var(--text-1);
|
|
line-height: 1.65;
|
|
max-width: 560px;
|
|
margin: 0 0 26px;
|
|
}
|
|
|
|
.overview-meta {
|
|
display: flex;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.overview-pill {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 7px;
|
|
font-family: var(--font-mono);
|
|
font-size: 12px;
|
|
color: var(--text-1);
|
|
background: var(--bg-2);
|
|
border: 1px solid var(--border);
|
|
padding: 6px 11px;
|
|
border-radius: var(--radius-md);
|
|
}
|
|
|
|
.overview-pill svg {
|
|
width: 13px;
|
|
height: 13px;
|
|
color: var(--text-2);
|
|
}
|
|
|
|
.overview-stats {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 1px;
|
|
background: var(--border);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-lg);
|
|
overflow: hidden;
|
|
margin-bottom: 36px;
|
|
}
|
|
|
|
.overview-stat {
|
|
background: var(--bg-1);
|
|
padding: 18px 20px;
|
|
}
|
|
|
|
.overview-stat-value {
|
|
font-size: 26px;
|
|
font-weight: 700;
|
|
letter-spacing: -0.02em;
|
|
font-family: var(--font-mono);
|
|
}
|
|
|
|
.overview-stat-label {
|
|
font-size: 11.5px;
|
|
color: var(--text-2);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
margin-top: 3px;
|
|
}
|
|
|
|
.overview-section-title {
|
|
font-size: 11.5px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
color: var(--text-2);
|
|
margin: 0 0 14px;
|
|
}
|
|
|
|
.overview-group-card {
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-lg);
|
|
margin-bottom: 14px;
|
|
overflow: hidden;
|
|
background: var(--bg-1);
|
|
}
|
|
|
|
.overview-group-card-header {
|
|
padding: 14px 18px;
|
|
border-bottom: 1px solid var(--border-soft);
|
|
font-weight: 650;
|
|
font-size: 14px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.overview-group-routes {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.overview-route-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 10px 18px;
|
|
border-bottom: 1px solid var(--border-soft);
|
|
cursor: pointer;
|
|
transition: background .1s ease;
|
|
}
|
|
|
|
.overview-route-row:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.overview-route-row:hover {
|
|
background: var(--bg-2);
|
|
}
|
|
|
|
.overview-route-row .method-badge {
|
|
width: 58px;
|
|
text-align: center;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.overview-route-row .route-path {
|
|
font-family: var(--font-mono);
|
|
font-size: 12.5px;
|
|
color: var(--text-0);
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.overview-route-row .route-summary {
|
|
color: var(--text-2);
|
|
font-size: 12.5px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.overview-route-row .route-arrow {
|
|
margin-left: auto;
|
|
width: 14px;
|
|
height: 14px;
|
|
color: var(--text-2);
|
|
flex: 0 0 auto;
|
|
opacity: 0;
|
|
transform: translateX(-3px);
|
|
transition: opacity .12s ease, transform .12s ease;
|
|
}
|
|
|
|
.overview-route-row:hover .route-arrow {
|
|
opacity: 1;
|
|
transform: none;
|
|
}
|
|
|
|
/* Endpoint detail */
|
|
.endpoint-header {
|
|
padding: 30px 0 0;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.breadcrumb {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-size: 12px;
|
|
color: var(--text-2);
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.breadcrumb svg {
|
|
width: 11px;
|
|
height: 11px;
|
|
}
|
|
|
|
.breadcrumb .current {
|
|
color: var(--text-1);
|
|
}
|
|
|
|
.request-line {
|
|
display: flex;
|
|
align-items: stretch;
|
|
font-family: var(--font-mono);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
background: var(--code-bg);
|
|
overflow: hidden;
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
.method-badge {
|
|
font-size: 11.5px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.03em;
|
|
color: var(--bg-0);
|
|
background: var(--method-color, var(--text-2));
|
|
padding: 9px 14px;
|
|
flex: 0 0 auto;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.request-line .endpoint-path {
|
|
flex: 1 1 auto;
|
|
font-size: 14px;
|
|
color: var(--text-0);
|
|
word-break: break-all;
|
|
padding: 9px 14px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.request-line .copy-route-btn {
|
|
flex: 0 0 auto;
|
|
border: none;
|
|
border-left: 1px solid var(--border);
|
|
background: transparent;
|
|
color: var(--text-2);
|
|
cursor: pointer;
|
|
padding: 0 13px;
|
|
display: flex;
|
|
align-items: center;
|
|
transition: color .12s ease, background .12s ease;
|
|
}
|
|
|
|
.request-line .copy-route-btn:hover {
|
|
color: var(--text-0);
|
|
background: var(--bg-2);
|
|
}
|
|
|
|
.request-line .copy-route-btn svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
|
|
.endpoint-summary {
|
|
font-size: 23px;
|
|
font-weight: 650;
|
|
letter-spacing: -0.015em;
|
|
margin: 0 0 8px;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.endpoint-description {
|
|
color: var(--text-1);
|
|
font-size: 14px;
|
|
line-height: 1.65;
|
|
margin: 0;
|
|
max-width: 640px;
|
|
}
|
|
|
|
.deprecated-banner {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-top: 14px;
|
|
font-size: 12.5px;
|
|
color: var(--m-delete);
|
|
background: color-mix(in srgb, var(--m-delete) 10%, transparent);
|
|
border: 1px solid color-mix(in srgb, var(--m-delete) 28%, transparent);
|
|
padding: 9px 12px;
|
|
border-radius: var(--radius-md);
|
|
}
|
|
|
|
.deprecated-banner svg {
|
|
width: 15px;
|
|
height: 15px;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.section {
|
|
margin-top: 34px;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 11.5px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.07em;
|
|
text-transform: uppercase;
|
|
color: var(--text-2);
|
|
margin: 0 0 14px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.section-title .count {
|
|
font-family: var(--font-mono);
|
|
font-weight: 600;
|
|
color: var(--text-2);
|
|
background: var(--bg-2);
|
|
border-radius: 20px;
|
|
padding: 0px 7px;
|
|
font-size: 10.5px;
|
|
}
|
|
|
|
.param-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: 13px;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.param-table th {
|
|
text-align: left;
|
|
font-size: 11px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
color: var(--text-2);
|
|
font-weight: 650;
|
|
padding: 9px 12px;
|
|
background: var(--bg-2);
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.param-table td {
|
|
padding: 11px 12px;
|
|
border-bottom: 1px solid var(--border-soft);
|
|
vertical-align: top;
|
|
}
|
|
|
|
.param-table tr:last-child td {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.param-name {
|
|
font-family: var(--font-mono);
|
|
font-size: 12.5px;
|
|
color: var(--text-0);
|
|
font-weight: 600;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.param-required {
|
|
color: var(--m-delete);
|
|
font-size: 11px;
|
|
}
|
|
|
|
.param-loc {
|
|
font-family: var(--font-mono);
|
|
font-size: 10.5px;
|
|
color: var(--text-2);
|
|
background: var(--bg-2);
|
|
border: 1px solid var(--border);
|
|
border-radius: 4px;
|
|
padding: 1px 5px;
|
|
}
|
|
|
|
.param-type {
|
|
font-family: var(--font-mono);
|
|
font-size: 12px;
|
|
color: var(--accent);
|
|
}
|
|
|
|
.param-desc {
|
|
color: var(--text-1);
|
|
font-size: 12.5px;
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.schema-box {
|
|
background: var(--code-bg);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
padding: 16px 18px;
|
|
font-family: var(--font-mono);
|
|
font-size: 12.5px;
|
|
line-height: 1.75;
|
|
overflow-x: auto;
|
|
position: relative;
|
|
}
|
|
|
|
.schema-line {
|
|
white-space: pre;
|
|
}
|
|
|
|
.schema-key {
|
|
color: var(--text-0);
|
|
}
|
|
|
|
.schema-punct {
|
|
color: var(--text-2);
|
|
}
|
|
|
|
.schema-type {
|
|
color: var(--accent);
|
|
}
|
|
|
|
.schema-comment {
|
|
color: var(--text-2);
|
|
font-style: italic;
|
|
}
|
|
|
|
.schema-required-mark {
|
|
color: var(--m-delete);
|
|
}
|
|
|
|
.schema-nullable-mark {
|
|
color: var(--text-2);
|
|
font-style: italic;
|
|
}
|
|
|
|
.response-block {
|
|
margin-bottom: 14px;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.response-block-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 10px 14px;
|
|
background: var(--bg-2);
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.status-pill {
|
|
font-family: var(--font-mono);
|
|
font-size: 11.5px;
|
|
font-weight: 700;
|
|
padding: 2px 8px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.status-2xx {
|
|
color: var(--m-get);
|
|
background: color-mix(in srgb, var(--m-get) 15%, transparent);
|
|
}
|
|
|
|
.status-4xx {
|
|
color: var(--m-put);
|
|
background: color-mix(in srgb, var(--m-put) 15%, transparent);
|
|
}
|
|
|
|
.status-5xx {
|
|
color: var(--m-delete);
|
|
background: color-mix(in srgb, var(--m-delete) 15%, transparent);
|
|
}
|
|
|
|
.response-desc {
|
|
font-size: 12.5px;
|
|
color: var(--text-1);
|
|
}
|
|
|
|
.response-block-body {
|
|
padding: 13px 15px;
|
|
}
|
|
|
|
/* Try pane (right) */
|
|
.try-pane {
|
|
border-left: 1px solid var(--border);
|
|
background: color-mix(in srgb, var(--bg-1) 96%, transparent);
|
|
overflow-y: auto;
|
|
min-width: 0;
|
|
}
|
|
|
|
.try-content {
|
|
padding: 24px 22px 60px;
|
|
}
|
|
|
|
.try-empty {
|
|
padding: 70px 18px;
|
|
text-align: center;
|
|
color: var(--text-2);
|
|
font-size: 12.5px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.try-empty svg {
|
|
width: 30px;
|
|
height: 30px;
|
|
color: var(--border);
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.try-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 18px;
|
|
padding-bottom: 14px;
|
|
border-bottom: 1px solid var(--border-soft);
|
|
}
|
|
|
|
.try-title {
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
color: var(--text-2);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 7px;
|
|
}
|
|
|
|
.try-title .live-dot {
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
background: var(--method-color, var(--m-get));
|
|
box-shadow: 0 0 0 3px color-mix(in srgb, var(--method-color, var(--m-get)) 25%, transparent);
|
|
}
|
|
|
|
.try-tabs {
|
|
display: flex;
|
|
gap: 2px;
|
|
background: var(--bg-2);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
padding: 2px;
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
.try-tab {
|
|
flex: 1 1 auto;
|
|
text-align: center;
|
|
border: none;
|
|
background: transparent;
|
|
color: var(--text-2);
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
padding: 7px 8px;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
font-family: var(--font-mono);
|
|
}
|
|
|
|
.try-tab.active {
|
|
background: var(--bg-raised);
|
|
color: var(--text-0);
|
|
box-shadow: 0 1px 2px rgba(0,0,0,0.08);
|
|
}
|
|
|
|
.field-group {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.field-label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-family: var(--font-mono);
|
|
font-size: 12px;
|
|
color: var(--text-1);
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.field-sublabel {
|
|
font-family: var(--font-mono);
|
|
margin-bottom: 4px;
|
|
color: var(--text-2);
|
|
font-size: 11px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
}
|
|
|
|
.field-sublabel .req-star {
|
|
color: var(--m-delete);
|
|
}
|
|
|
|
.field-sublabel .type-hint {
|
|
color: var(--text-2);
|
|
font-weight: 400;
|
|
margin-left: auto;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.field-input {
|
|
width: 100%;
|
|
background: var(--bg-2);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-sm);
|
|
padding: 9px 11px;
|
|
color: var(--text-0);
|
|
font-family: var(--font-mono);
|
|
font-size: 12.5px;
|
|
outline: none;
|
|
transition: border-color .12s ease, box-shadow .12s ease;
|
|
}
|
|
|
|
.field-input:focus {
|
|
border-color: var(--accent);
|
|
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
|
|
}
|
|
|
|
textarea.field-input {
|
|
resize: vertical;
|
|
min-height: 140px;
|
|
line-height: 1.65;
|
|
}
|
|
|
|
.send-btn {
|
|
width: 100%;
|
|
background: var(--method-color, var(--accent));
|
|
color: #08090D;
|
|
border: none;
|
|
border-radius: var(--radius-md);
|
|
padding: 11px;
|
|
font-weight: 700;
|
|
font-size: 13px;
|
|
cursor: pointer;
|
|
margin-top: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
transition: filter .12s ease, transform .04s ease;
|
|
font-family: var(--font-mono);
|
|
}
|
|
|
|
.send-btn:hover {
|
|
filter: brightness(1.08);
|
|
}
|
|
|
|
.send-btn:active {
|
|
transform: scale(0.99);
|
|
}
|
|
|
|
.send-btn:disabled {
|
|
opacity: 0.6;
|
|
cursor: default;
|
|
}
|
|
|
|
.send-btn svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
|
|
.spinner {
|
|
width: 14px;
|
|
height: 14px;
|
|
border: 2px solid rgba(0,0,0,0.25);
|
|
border-top-color: #08090D;
|
|
border-radius: 50%;
|
|
animation: spin 0.7s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.response-panel {
|
|
margin-top: 24px;
|
|
border-top: 1px solid var(--border);
|
|
padding-top: 20px;
|
|
}
|
|
|
|
.response-meta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-bottom: 12px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.response-time {
|
|
font-family: var(--font-mono);
|
|
font-size: 11.5px;
|
|
color: var(--text-2);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
.response-time svg {
|
|
width: 11px;
|
|
height: 11px;
|
|
}
|
|
|
|
.response-body {
|
|
background: var(--code-bg);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
padding: 13px 15px;
|
|
font-family: var(--font-mono);
|
|
font-size: 12px;
|
|
line-height: 1.65;
|
|
max-height: 420px;
|
|
overflow: auto;
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.response-error {
|
|
color: var(--m-delete);
|
|
}
|
|
|
|
.copy-btn {
|
|
background: transparent;
|
|
border: 1px solid var(--border);
|
|
color: var(--text-2);
|
|
border-radius: 5px;
|
|
padding: 4px 9px;
|
|
font-size: 11px;
|
|
cursor: pointer;
|
|
font-family: var(--font-mono);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
transition: color .12s ease, border-color .12s ease;
|
|
}
|
|
|
|
.copy-btn svg {
|
|
width: 11px;
|
|
height: 11px;
|
|
}
|
|
|
|
.copy-btn:hover {
|
|
color: var(--text-0);
|
|
border-color: var(--text-1);
|
|
}
|
|
|
|
.json-key {
|
|
color: #7FB3FF;
|
|
}
|
|
|
|
.json-string {
|
|
color: #5FE3A8;
|
|
}
|
|
|
|
.json-number {
|
|
color: #F5B947;
|
|
}
|
|
|
|
.json-boolean {
|
|
color: #D5A6F5;
|
|
}
|
|
|
|
.json-null {
|
|
color: var(--text-2);
|
|
}
|
|
|
|
.action-group {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
.action-btn {
|
|
height: 34px;
|
|
padding: 0 12px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 10px;
|
|
background: var(--bg-2);
|
|
color: var(--text-0);
|
|
cursor: pointer;
|
|
font-weight: 600;
|
|
transition: all .18s var(--ease);
|
|
}
|
|
|
|
.action-btn:hover {
|
|
transform: translateY(-1px);
|
|
border-color: color-mix(in srgb,var(--accent) 40%,var(--border));
|
|
box-shadow: 0 8px 24px color-mix(in srgb,var(--accent) 15%,transparent);
|
|
}
|
|
|
|
.action-btn-primary {
|
|
background: linear-gradient( 135deg, var(--accent), color-mix(in srgb,var(--accent) 70%,#ffffff 10%) );
|
|
color: white;
|
|
border-color: transparent;
|
|
}
|
|
|
|
|
|
/* curl snippet */
|
|
.curl-box {
|
|
background: var(--code-bg);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
padding: 13px 15px;
|
|
font-family: var(--font-mono);
|
|
font-size: 11.5px;
|
|
line-height: 1.7;
|
|
overflow-x: auto;
|
|
white-space: pre;
|
|
position: relative;
|
|
color: var(--text-1);
|
|
}
|
|
|
|
.curl-box .curl-flag {
|
|
color: var(--accent);
|
|
}
|
|
|
|
.curl-box .curl-string {
|
|
color: #5FE3A8;
|
|
}
|
|
|
|
.curl-header-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
/* responsive: collapse try pane on narrow screens behind a toggle */
|
|
@media (max-width: 1180px) {
|
|
:root {
|
|
--try-w: 380px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 980px) {
|
|
.body-grid {
|
|
grid-template-columns: 240px 1fr;
|
|
}
|
|
|
|
.try-pane {
|
|
display: none;
|
|
}
|
|
|
|
.try-pane.open {
|
|
display: block;
|
|
position: fixed;
|
|
right: 0;
|
|
top: var(--topbar-h);
|
|
bottom: 0;
|
|
width: 380px;
|
|
box-shadow: var(--shadow);
|
|
z-index: 20;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 680px) {
|
|
.body-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.nav-pane {
|
|
display: none;
|
|
position: fixed;
|
|
left: 0;
|
|
top: var(--topbar-h);
|
|
bottom: 0;
|
|
width: 270px;
|
|
z-index: 20;
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.nav-pane.open {
|
|
display: block;
|
|
}
|
|
|
|
.topbar-search {
|
|
max-width: none;
|
|
}
|
|
|
|
.overview-stats {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
.skeleton {
|
|
background: linear-gradient(90deg, var(--bg-2) 25%, var(--bg-3) 37%, var(--bg-2) 63%);
|
|
background-size: 400% 100%;
|
|
animation: shimmer 1.4s ease infinite;
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
|
|
@keyframes shimmer {
|
|
0% {
|
|
background-position: 100% 50%;
|
|
}
|
|
|
|
100% {
|
|
background-position: 0 50%;
|
|
}
|
|
}
|
|
|
|
.fade-in {
|
|
animation: fadeIn .22s var(--ease);
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(3px);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: none;
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*, *::before, *::after {
|
|
animation-duration: 0.001ms !important;
|
|
transition-duration: 0.001ms !important;
|
|
}
|
|
}
|
|
|
|
|
|
.api-switcher{
|
|
display:flex;
|
|
align-items:center;
|
|
margin-right:12px;
|
|
}
|
|
|
|
#apiSelector{
|
|
min-width:220px;
|
|
height:38px;
|
|
border-radius:10px;
|
|
padding:0 12px;
|
|
background:var(--panel,#1e1e1e);
|
|
color:var(--text,#fff);
|
|
border:1px solid var(--border,#3a3a3a);
|
|
font-weight:600;
|
|
cursor:pointer;
|
|
}
|
|
|
|
#apiSelector:hover{
|
|
filter:brightness(1.05);
|
|
}
|
|
|
|
#apiSelector:focus{
|
|
outline:none;
|
|
}
|
|
|
|
.request-builder,.header-row,.query-row{display:flex;gap:8px;margin-bottom:8px}
|
|
.header-key,.query-key{flex:0 0 35%}
|
|
.header-value,.query-value,.request-url{flex:1}
|
|
.postman-section{margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
|