| .api-snippet { |
| padding: 100px 0; |
| background: linear-gradient(to bottom, rgba(249,115,22,0.03), transparent); |
| } |
| .api-snippet__inner { |
| display: grid; |
| grid-template-columns: 1fr 1fr; |
| gap: 64px; |
| align-items: start; |
| } |
| .api-snippet__left { display: flex; flex-direction: column; gap: 24px; } |
| .api-snippet__endpoints { display: flex; flex-direction: column; gap: 8px; } |
| .api-snippet__endpoint { |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| padding: 10px 14px; |
| background: var(--bg-card); |
| border: 1px solid var(--border); |
| border-radius: 8px; |
| transition: border-color 0.2s; |
| } |
| .api-snippet__endpoint:hover { border-color: var(--border-hover); } |
| .api-snippet__method { |
| font-family: var(--mono); |
| font-size: 10px; |
| font-weight: 700; |
| padding: 2px 7px; |
| border-radius: 4px; |
| flex-shrink: 0; |
| } |
| .api-snippet__method--post { background: rgba(249,115,22,0.15); color: #fb923c; } |
| .api-snippet__method--get { background: rgba(16,185,129,0.15); color: #6ee7b7; } |
| .api-snippet__path { font-family: var(--mono); font-size: 12px; color: var(--text); flex: 1; } |
| .api-snippet__edesc { font-size: 12px; color: var(--text-dim); } |
|
|
| .api-snippet__window { |
| background: var(--bg-card); |
| border: 1px solid var(--border); |
| border-radius: 16px; |
| overflow: hidden; |
| } |
| .api-snippet__tabs { |
| display: flex; |
| border-bottom: 1px solid var(--border); |
| padding: 0 4px; |
| } |
| .api-snippet__tab { |
| background: none; |
| border: none; |
| color: var(--text-muted); |
| font-size: 13px; |
| font-weight: 500; |
| padding: 12px 16px; |
| cursor: pointer; |
| border-bottom: 2px solid transparent; |
| margin-bottom: -1px; |
| transition: color 0.2s, border-color 0.2s; |
| } |
| .api-snippet__tab:hover { color: var(--text); } |
| .api-snippet__tab--active { color: var(--purple-light); border-bottom-color: var(--purple); } |
| .api-snippet__code { padding: 16px; overflow-x: auto; max-height: 400px; overflow-y: auto; } |
| .api-snippet__code pre { font-family: var(--mono); font-size: 12px; color: #c4b5fd; line-height: 1.7; white-space: pre; } |
|
|
| @media (max-width: 1024px) { .api-snippet__inner { grid-template-columns: 1fr; } } |
|
|
