diff options
Diffstat (limited to 'static/api-docs-styles.css')
-rw-r--r-- | static/api-docs-styles.css | 1073 |
1 files changed, 1073 insertions, 0 deletions
diff --git a/static/api-docs-styles.css b/static/api-docs-styles.css new file mode 100644 index 0000000..a97e15e --- /dev/null +++ b/static/api-docs-styles.css @@ -0,0 +1,1073 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +:root { + --primary-color: #6366f1; + --primary-dark: #4f46e5; + --secondary-color: #f1f5f9; + --text-primary: #1e293b; + --text-secondary: #64748b; + --background: #ffffff; + --surface: #f8fafc; + --border: #e2e8f0; + --success: #10b981; + --warning: #f59e0b; + --error: #ef4444; + --code-bg: #1e293b; + --code-text: #e2e8f0; + --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); + --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1); + --gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); +} + +body { + font-family: 'Inter', sans-serif; + line-height: 1.6; + color: var(--text-primary); + background: var(--background); +} + +/* Navigation */ +.navbar { + position: fixed; + top: 0; + width: 100%; + background: rgba(255, 255, 255, 0.95); + backdrop-filter: blur(10px); + z-index: 1000; + border-bottom: 1px solid var(--border); +} + +.nav-container { + max-width: 1200px; + margin: 0 auto; + padding: 1rem 2rem; + display: flex; + justify-content: space-between; + align-items: center; +} + +.nav-logo { + font-size: 1.5rem; + font-weight: 700; + background: var(--gradient); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + text-decoration: none; +} + +.nav-menu { + display: flex; + list-style: none; + gap: 2rem; +} + +.nav-link { + text-decoration: none; + color: var(--text-primary); + font-weight: 500; + transition: color 0.3s ease; +} + +.nav-link:hover { + color: var(--primary-color); +} + +.nav-actions { + display: flex; + align-items: center; + gap: 1rem; +} + +/* Buttons */ +.btn { + padding: 0.75rem 1.5rem; + border: none; + border-radius: 0.5rem; + font-weight: 600; + cursor: pointer; + transition: all 0.3s ease; + text-decoration: none; + display: inline-flex; + align-items: center; + justify-content: center; + gap: 0.5rem; + font-size: 0.875rem; +} + +.btn-primary { + background: var(--gradient); + color: white; + box-shadow: var(--shadow); +} + +.btn-primary:hover { + transform: translateY(-2px); + box-shadow: var(--shadow-lg); +} + +.btn-secondary { + background: white; + color: var(--text-primary); + border: 2px solid var(--border); +} + +.btn-secondary:hover { + border-color: var(--primary-color); + color: var(--primary-color); +} + +.btn-ghost { + background: transparent; + color: var(--text-primary); + border: none; +} + +.btn-ghost:hover { + background: var(--surface); +} + +/* Layout */ +.docs-layout { + display: flex; + margin-top: 80px; + min-height: calc(100vh - 80px); +} + +.sidebar { + width: 300px; + background: var(--surface); + border-right: 1px solid var(--border); + padding: 2rem; + position: sticky; + top: 80px; + height: calc(100vh - 80px); + overflow-y: auto; +} + +.sidebar-header { + margin-bottom: 2rem; +} + +.sidebar-header h3 { + font-size: 1.25rem; + font-weight: 600; + margin-bottom: 0.5rem; +} + +.api-version { + background: var(--primary-color); + color: white; + padding: 0.25rem 0.75rem; + border-radius: 1rem; + font-size: 0.75rem; + font-weight: 600; + display: inline-block; +} + +.sidebar-nav { + display: flex; + flex-direction: column; + gap: 2rem; +} + +.nav-section h4 { + font-size: 0.875rem; + font-weight: 600; + color: var(--text-secondary); + text-transform: uppercase; + letter-spacing: 0.05em; + margin-bottom: 1rem; +} + +.nav-section ul { + list-style: none; + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.nav-item { + color: var(--text-primary); + text-decoration: none; + padding: 0.5rem 0.75rem; + border-radius: 0.375rem; + transition: all 0.3s ease; + font-size: 0.875rem; +} + +.nav-item:hover, +.nav-item.active { + background: var(--primary-color); + color: white; +} + +.main-content { + flex: 1; + padding: 2rem 3rem; + max-width: calc(100vw - 300px); +} + +/* Content Header */ +.content-header { + margin-bottom: 3rem; + padding-bottom: 2rem; + border-bottom: 1px solid var(--border); +} + +.content-header h1 { + font-size: 3rem; + font-weight: 700; + margin-bottom: 1rem; +} + +.content-header p { + font-size: 1.25rem; + color: var(--text-secondary); + margin-bottom: 2rem; +} + +.quick-actions { + display: flex; + align-items: center; + gap: 1rem; + flex-wrap: wrap; +} + +.api-status { + display: flex; + align-items: center; + gap: 0.5rem; + font-size: 0.875rem; + color: var(--text-secondary); +} + +.status-dot { + width: 8px; + height: 8px; + border-radius: 50%; + background: var(--success); +} + +.status-dot.operational { + background: var(--success); +} + +/* Documentation Sections */ +.doc-section { + margin-bottom: 4rem; + scroll-margin-top: 100px; +} + +.doc-section h2 { + font-size: 2rem; + font-weight: 700; + margin-bottom: 1rem; + color: var(--text-primary); +} + +.doc-section h3 { + font-size: 1.5rem; + font-weight: 600; + margin: 2rem 0 1rem 0; + color: var(--text-primary); +} + +.doc-section h4 { + font-size: 1.125rem; + font-weight: 600; + margin: 1.5rem 0 1rem 0; + color: var(--text-primary); +} + +.doc-section p { + margin-bottom: 1.5rem; + color: var(--text-secondary); + line-height: 1.7; +} + +.feature-list { + list-style: none; + margin: 1.5rem 0; +} + +.feature-list li { + padding: 0.5rem 0; + padding-left: 1.5rem; + position: relative; + color: var(--text-secondary); +} + +.feature-list li::before { + content: '✓'; + position: absolute; + left: 0; + color: var(--success); + font-weight: bold; +} + +/* Info Boxes */ +.info-box { + background: var(--surface); + border: 1px solid var(--border); + border-radius: 0.75rem; + padding: 1.5rem; + margin: 2rem 0; + display: flex; + align-items: flex-start; + gap: 1rem; +} + +.info-icon { + font-size: 1.5rem; + margin-top: 0.25rem; +} + +.info-content h4 { + margin: 0 0 0.5rem 0; + font-size: 1rem; +} + +.info-content code { + background: var(--code-bg); + color: var(--code-text); + padding: 0.5rem 1rem; + border-radius: 0.375rem; + font-family: 'JetBrains Mono', monospace; + font-size: 0.875rem; +} + +/* Authentication Methods */ +.auth-methods { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 2rem; + margin: 2rem 0; +} + +.auth-method { + background: white; + border: 1px solid var(--border); + border-radius: 0.75rem; + padding: 2rem; +} + +.auth-method h3 { + margin-top: 0; + margin-bottom: 1rem; +} + +/* Rate Limits */ +.rate-limits { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 1.5rem; + margin: 2rem 0; +} + +.rate-limit-tier { + background: white; + border: 1px solid var(--border); + border-radius: 0.75rem; + padding: 1.5rem; + text-align: center; +} + +.rate-limit-tier h4 { + margin: 0 0 1rem 0; + color: var(--primary-color); +} + +.limit-value { + font-size: 1.5rem; + font-weight: 700; + color: var(--text-primary); + margin-bottom: 0.5rem; +} + +.limit-burst { + font-size: 0.875rem; + color: var(--text-secondary); +} + +/* Error Codes */ +.error-codes { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 1rem; + margin: 2rem 0; +} + +.error-code { + background: white; + border: 1px solid var(--border); + border-radius: 0.5rem; + padding: 1rem; + display: flex; + align-items: center; + gap: 1rem; +} + +.code-number { + font-size: 1.25rem; + font-weight: 700; + color: var(--primary-color); + font-family: 'JetBrains Mono', monospace; + min-width: 3rem; +} + +.code-description h4 { + margin: 0 0 0.25rem 0; + font-size: 1rem; +} + +.code-description p { + margin: 0; + font-size: 0.875rem; + color: var(--text-secondary); +} + +/* Code Examples */ +.code-example { + margin: 2rem 0; + border-radius: 0.75rem; + overflow: hidden; + border: 1px solid var(--border); +} + +.code-header { + background: var(--surface); + padding: 1rem 1.5rem; + display: flex; + justify-content: space-between; + align-items: center; + border-bottom: 1px solid var(--border); +} + +.code-title { + font-weight: 600; + color: var(--text-primary); +} + +.code-tabs { + display: flex; + gap: 0.5rem; +} + +.tab-btn { + padding: 0.5rem 1rem; + border: none; + background: transparent; + color: var(--text-secondary); + cursor: pointer; + border-radius: 0.375rem; + font-size: 0.875rem; + transition: all 0.3s ease; +} + +.tab-btn.active, +.tab-btn:hover { + background: white; + color: var(--primary-color); +} + +.copy-btn { + padding: 0.5rem 1rem; + border: 1px solid var(--border); + background: white; + color: var(--text-secondary); + border-radius: 0.375rem; + cursor: pointer; + font-size: 0.875rem; + transition: all 0.3s ease; +} + +.copy-btn:hover { + color: var(--primary-color); + border-color: var(--primary-color); +} + +.code-content { + position: relative; +} + +.tab-content { + display: none; +} + +.tab-content.active { + display: block; +} + +.code-example pre { + background: var(--code-bg); + color: var(--code-text); + padding: 1.5rem; + margin: 0; + overflow-x: auto; + font-family: 'JetBrains Mono', monospace; + font-size: 0.875rem; + line-height: 1.6; +} + +.code-example code { + background: transparent; + color: inherit; + padding: 0; +} + +/* Endpoints */ +.endpoint-group { + margin: 2rem 0; +} + +.endpoint { + background: white; + border: 1px solid var(--border); + border-radius: 0.75rem; + margin-bottom: 2rem; + overflow: hidden; +} + +.endpoint-header { + background: var(--surface); + padding: 1.5rem 2rem; + display: flex; + align-items: center; + gap: 1rem; + border-bottom: 1px solid var(--border); +} + +.method { + padding: 0.5rem 1rem; + border-radius: 0.375rem; + font-weight: 700; + font-size: 0.875rem; + font-family: 'JetBrains Mono', monospace; + min-width: 4rem; + text-align: center; +} + +.method.get { + background: rgba(16, 185, 129, 0.1); + color: var(--success); +} + +.method.post { + background: rgba(99, 102, 241, 0.1); + color: var(--primary-color); +} + +.method.put { + background: rgba(245, 158, 11, 0.1); + color: var(--warning); +} + +.method.delete { + background: rgba(239, 68, 68, 0.1); + color: var(--error); +} + +.endpoint-path { + font-family: 'JetBrains Mono', monospace; + font-weight: 600; + color: var(--text-primary); + flex: 1; +} + +.endpoint-title { + font-weight: 600; + color: var(--text-primary); +} + +.endpoint-content { + padding: 2rem; +} + +.endpoint-content p { + margin-bottom: 2rem; +} + +/* Parameters */ +.parameters { + margin: 1.5rem 0; +} + +.parameter { + display: grid; + grid-template-columns: 1fr 1fr 2fr; + gap: 1rem; + padding: 1rem; + border-bottom: 1px solid var(--border); + align-items: start; +} + +.parameter:last-child { + border-bottom: none; +} + +.parameter.required .param-name::after { + content: ' *'; + color: var(--error); +} + +.param-name { + font-family: 'JetBrains Mono', monospace; + font-weight: 600; + color: var(--text-primary); +} + +.param-type { + font-family: 'JetBrains Mono', monospace; + color: var(--primary-color); + font-size: 0.875rem; +} + +.param-description { + color: var(--text-secondary); + font-size: 0.875rem; + line-height: 1.5; +} + +/* Try It Section */ +.try-it-section { + margin-top: 2rem; + padding-top: 2rem; + border-top: 1px solid var(--border); +} + +.try-it-btn { + background: var(--success); + color: white; +} + +.try-it-btn:hover { + background: #059669; +} + +/* Webhook Events */ +.webhook-events { + margin: 2rem 0; +} + +.event-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 1rem; + margin: 1.5rem 0; +} + +.event-item { + background: white; + border: 1px solid var(--border); + border-radius: 0.5rem; + padding: 1rem; +} + +.event-name { + font-family: 'JetBrains Mono', monospace; + font-weight: 600; + color: var(--primary-color); + margin-bottom: 0.5rem; +} + +.event-description { + color: var(--text-secondary); + font-size: 0.875rem; +} + +/* SDKs */ +.sdk-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: 2rem; + margin: 2rem 0; +} + +.sdk-card { + background: white; + border: 1px solid var(--border); + border-radius: 0.75rem; + padding: 2rem; + text-align: center; + transition: transform 0.3s ease; +} + +.sdk-card:hover { + transform: translateY(-5px); +} + +.sdk-icon { + font-size: 3rem; + margin-bottom: 1rem; +} + +.sdk-card h3 { + margin: 0 0 1rem 0; + color: var(--text-primary); +} + +.sdk-card p { + margin-bottom: 1.5rem; + color: var(--text-secondary); +} + +.sdk-install { + background: var(--code-bg); + color: var(--code-text); + padding: 1rem; + border-radius: 0.375rem; + margin-bottom: 1.5rem; + font-family: 'JetBrains Mono', monospace; + font-size: 0.875rem; +} + +.sdk-links { + display: flex; + justify-content: center; + gap: 1rem; +} + +.sdk-link { + color: var(--primary-color); + text-decoration: none; + font-weight: 500; + font-size: 0.875rem; +} + +.sdk-link:hover { + text-decoration: underline; +} + +/* Changelog */ +.changelog { + margin: 2rem 0; +} + +.changelog-entry { + background: white; + border: 1px solid var(--border); + border-radius: 0.75rem; + padding: 2rem; + margin-bottom: 2rem; +} + +.changelog-date { + color: var(--text-secondary); + font-size: 0.875rem; + margin-bottom: 0.5rem; +} + +.changelog-version { + font-family: 'JetBrains Mono', monospace; + font-weight: 600; + color: var(--primary-color); + margin-bottom: 1rem; +} + +.changelog-content h4 { + margin: 1.5rem 0 1rem 0; + color: var(--text-primary); +} + +.changelog-content ul { + margin-bottom: 1.5rem; +} + +.changelog-content li { + color: var(--text-secondary); + margin-bottom: 0.5rem; +} + +/* Support Options */ +.support-options { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 2rem; + margin: 2rem 0; +} + +.support-option { + background: white; + border: 1px solid var(--border); + border-radius: 0.75rem; + padding: 2rem; + text-align: center; + transition: transform 0.3s ease; +} + +.support-option:hover { + transform: translateY(-5px); +} + +.support-icon { + font-size: 3rem; + margin-bottom: 1rem; +} + +.support-option h3 { + margin: 0 0 1rem 0; +} + +.support-option p { + margin-bottom: 1.5rem; + color: var(--text-secondary); +} + +.support-link { + color: var(--primary-color); + text-decoration: none; + font-weight: 600; +} + +.support-link:hover { + text-decoration: underline; +} + +/* API Tester */ +.api-tester { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 90%; + max-width: 800px; + max-height: 80vh; + background: white; + border-radius: 1rem; + box-shadow: var(--shadow-lg); + z-index: 2000; + display: none; + overflow: hidden; +} + +.api-tester.show { + display: block; +} + +.tester-header { + background: var(--surface); + padding: 1.5rem 2rem; + display: flex; + justify-content: space-between; + align-items: center; + border-bottom: 1px solid var(--border); +} + +.tester-header h3 { + margin: 0; + font-size: 1.25rem; +} + +.close-btn { + background: none; + border: none; + font-size: 1.5rem; + cursor: pointer; + color: var(--text-secondary); + padding: 0.5rem; + border-radius: 0.375rem; + transition: all 0.3s ease; +} + +.close-btn:hover { + background: var(--border); + color: var(--text-primary); +} + +.tester-content { + padding: 2rem; + max-height: calc(80vh - 100px); + overflow-y: auto; +} + +.tester-form { + margin-bottom: 2rem; +} + +.form-group { + margin-bottom: 1.5rem; +} + +.form-group label { + display: block; + font-weight: 600; + margin-bottom: 0.5rem; + color: var(--text-primary); +} + +.form-group input, +.form-group select, +.form-group textarea { + width: 100%; + padding: 0.75rem 1rem; + border: 1px solid var(--border); + border-radius: 0.5rem; + font-size: 1rem; + font-family: inherit; + transition: border-color 0.3s ease; +} + +.form-group input:focus, +.form-group select:focus, +.form-group textarea:focus { + outline: none; + border-color: var(--primary-color); +} + +.form-group textarea { + font-family: 'JetBrains Mono', monospace; + font-size: 0.875rem; + resize: vertical; +} + +.tester-response h4 { + margin: 0 0 1rem 0; + color: var(--text-primary); +} + +.response-status { + padding: 0.5rem 1rem; + border-radius: 0.375rem; + font-family: 'JetBrains Mono', monospace; + font-weight: 600; + margin-bottom: 1rem; +} + +.response-status.success { + background: rgba(16, 185, 129, 0.1); + color: var(--success); +} + +.response-status.error { + background: rgba(239, 68, 68, 0.1); + color: var(--error); +} + +#responseBody { + background: var(--code-bg); + color: var(--code-text); + padding: 1.5rem; + border-radius: 0.5rem; + font-family: 'JetBrains Mono', monospace; + font-size: 0.875rem; + line-height: 1.6; + overflow-x: auto; + white-space: pre-wrap; +} + +/* Toast */ +.toast { + position: fixed; + top: 2rem; + right: 2rem; + background: var(--success); + color: white; + padding: 1rem 1.5rem; + border-radius: 0.5rem; + box-shadow: var(--shadow-lg); + transform: translateX(100%); + transition: transform 0.3s ease; + z-index: 1000; +} + +.toast.show { + transform: translateX(0); +} + +.toast-content { + display: flex; + align-items: center; + gap: 0.5rem; +} + +.toast-icon { + font-size: 1.25rem; +} + +/* Responsive Design */ +@media (max-width: 1024px) { + .docs-layout { + flex-direction: column; + } + + .sidebar { + width: 100%; + position: static; + height: auto; + border-right: none; + border-bottom: 1px solid var(--border); + } + + .main-content { + max-width: 100%; + padding: 2rem; + } + + .nav-menu { + display: none; + } +} + +@media (max-width: 768px) { + .content-header h1 { + font-size: 2rem; + } + + .auth-methods { + grid-template-columns: 1fr; + } + + .rate-limits { + grid-template-columns: 1fr; + } + + .parameter { + grid-template-columns: 1fr; + gap: 0.5rem; + } + + .endpoint-header { + flex-direction: column; + align-items: flex-start; + gap: 0.5rem; + } + + .api-tester { + width: 95%; + max-height: 90vh; + } + + .tester-content { + padding: 1rem; + } +} + +@media (max-width: 480px) { + .main-content { + padding: 1rem; + } + + .sidebar { + padding: 1rem; + } + + .content-header { + margin-bottom: 2rem; + } + + .quick-actions { + flex-direction: column; + align-items: stretch; + } + + .toast { + top: 1rem; + right: 1rem; + left: 1rem; + } +} |