raffel 1.1.48 → 1.1.50

package/dist/docs/ui/assets/raffel-docs.css

@@ -684,6 +684,16 @@
       gap: 0;
     }
 
+    /* Drop the (empty) TOC gutter on endpoint views so the operation's
+       two-column content — docs + samples panel — can use the full width. */
+    .main-shell.main-shell-no-toc {
+      grid-template-columns: minmax(0, 1fr);
+    }
+
+    .main-shell.main-shell-no-toc .toc {
+      display: none;
+    }
+
     /* ========== SIDEBAR ========== */
     .sidebar {
       background: var(--sidebar-bg);
@@ -3320,6 +3330,254 @@
       animation: fadeIn 0.3s ease-out;
     }
 
+    /* ========== HTTP ENDPOINT (ReDoc-style) ========== */
+    .http-param-group {
+      margin-bottom: 20px;
+    }
+
+    .http-param-group-title {
+      font-size: 12px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      color: var(--text-muted);
+      margin-bottom: 8px;
+    }
+
+    .http-params {
+      border: 1px solid var(--border-color);
+      border-radius: 8px;
+      overflow: hidden;
+    }
+
+    .http-param {
+      padding: 12px 16px;
+      border-bottom: 1px solid var(--border-color);
+    }
+
+    .http-param:last-child { border-bottom: none; }
+
+    .http-param-head {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      gap: 8px;
+    }
+
+    .http-param-name {
+      font-family: 'SF Mono', 'Monaco', monospace;
+      font-size: 13px;
+      font-weight: 600;
+      color: var(--text-color);
+    }
+
+    .http-param-required {
+      font-size: 10px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.4px;
+      color: #ef4444;
+    }
+
+    .http-param-deprecated {
+      font-size: 10px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.4px;
+      color: #f59e0b;
+    }
+
+    .http-param-desc {
+      color: var(--text-muted);
+      font-size: 13px;
+      margin-top: 6px;
+      line-height: 1.5;
+    }
+
+    /* Validation constraint chips (reuses .schema-constraint look) */
+    .constraint-chips {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 6px;
+      margin-top: 8px;
+    }
+
+    .constraint-chip {
+      font-size: 11px;
+      padding: 2px 8px;
+      border-radius: 4px;
+      background: var(--code-bg);
+      color: var(--text-muted);
+      border: 1px solid var(--border-color);
+      font-family: 'SF Mono', 'Monaco', monospace;
+    }
+
+    .constraint-chip.constraint-enum {
+      background: #fef3c7;
+      color: #92400e;
+      border-color: transparent;
+    }
+
+    [data-theme="dark"] .constraint-chip.constraint-enum {
+      background: #451a03;
+      color: #fbbf24;
+    }
+
+    /* Response accordions */
+    .response-accordion {
+      border: 1px solid var(--border-color);
+      border-radius: 8px;
+      margin-bottom: 10px;
+      overflow: hidden;
+    }
+
+    .response-accordion-header {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      width: 100%;
+      padding: 12px 14px;
+      background: var(--code-bg);
+      border: none;
+      cursor: pointer;
+      text-align: left;
+      font-size: 13px;
+      color: var(--text-color);
+      transition: background 0.15s;
+    }
+
+    .response-accordion-header:hover { background: var(--hover-bg); }
+
+    .response-accordion-caret {
+      flex-shrink: 0;
+      font-size: 10px;
+      color: var(--text-muted);
+      transition: transform 0.2s ease;
+    }
+
+    .response-accordion.open .response-accordion-caret {
+      transform: rotate(90deg);
+    }
+
+    .response-status-dot {
+      width: 9px;
+      height: 9px;
+      border-radius: 50%;
+      flex-shrink: 0;
+    }
+
+    .response-status-dot.status-2xx { background: #10b981; }
+    .response-status-dot.status-3xx { background: #3b82f6; }
+    .response-status-dot.status-4xx { background: #f59e0b; }
+    .response-status-dot.status-5xx { background: #ef4444; }
+
+    .response-status-code {
+      font-family: 'SF Mono', 'Monaco', monospace;
+      font-weight: 600;
+    }
+
+    .response-status-desc {
+      color: var(--text-muted);
+    }
+
+    .response-accordion-body {
+      padding: 14px;
+      border-top: 1px solid var(--border-color);
+      display: none;
+    }
+
+    .response-accordion.open .response-accordion-body { display: block; }
+
+    .response-subhead {
+      font-size: 11px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      color: var(--text-muted);
+      margin: 0 0 8px;
+    }
+
+    .response-block + .response-block { margin-top: 16px; }
+
+    /* Multi-language code samples */
+    .http-code-samples {
+      margin-top: 8px;
+      border: 1px solid var(--border-color);
+      border-radius: 8px;
+      overflow: hidden;
+      background: var(--code-bg);
+    }
+
+    .http-code-samples .code-tabs {
+      flex-wrap: wrap;
+      background: rgba(0,0,0,0.04);
+    }
+
+    [data-theme="dark"] .http-code-samples .code-tabs {
+      background: rgba(255,255,255,0.03);
+    }
+
+    .http-code-sample-pre {
+      margin: 0;
+      padding: 14px;
+      background: transparent;
+      border: none;
+      border-radius: 0;
+      overflow-x: auto;
+      font-family: 'SF Mono', 'Fira Code', 'Monaco', monospace;
+      font-size: 12px;
+      line-height: 1.55;
+      color: var(--text-color);
+      white-space: pre;
+    }
+
+    .http-code-copy {
+      margin-left: auto;
+      padding: 4px 10px;
+      background: transparent;
+      border: 1px solid var(--border-color);
+      border-radius: 4px;
+      color: var(--text-muted);
+      font-size: 11px;
+      cursor: pointer;
+      transition: all 0.15s;
+    }
+
+    .http-code-copy:hover { color: var(--text-color); border-color: var(--text-muted); }
+
+    /* Right panel (third column): keep request/response samples dark & legible
+       regardless of the active theme, matching ReDoc's sample column. */
+    .endpoint-right .endpoint-right-section + .endpoint-right-section {
+      margin-top: 24px;
+    }
+
+    .endpoint-right .http-code-samples {
+      background: rgba(0,0,0,0.25);
+      border-color: rgba(255,255,255,0.1);
+    }
+
+    .endpoint-right .http-code-samples .code-tabs {
+      background: rgba(0,0,0,0.2);
+      border-color: rgba(255,255,255,0.1);
+    }
+
+    .endpoint-right .http-code-sample-pre {
+      color: var(--code-panel-text);
+    }
+
+    .endpoint-right .code-tab {
+      color: #90a4ae;
+    }
+
+    .endpoint-right .code-tab.active {
+      background: rgba(255,255,255,0.12);
+      color: #fff;
+    }
+
+    .endpoint-right .response-subhead {
+      color: #90a4ae;
+    }
+
     /* ========== TRY IT OUT ========== */
     .try-it-out {
       background: rgba(0,0,0,0.2);
@@ -3452,28 +3710,35 @@
 
     .try-it-actions {
       margin-top: 16px;
+      display: flex;
+      gap: 8px;
+      flex-wrap: wrap;
     }
 
     .try-it-send {
-      width: 100%;
-      padding: 12px 20px;
-      background: var(--primary-color);
-      color: white;
-      border: none;
-      border-radius: 6px;
-      font-size: 14px;
-      font-weight: 600;
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      width: auto;
+      padding: 6px 14px;
+      background: transparent;
+      color: var(--primary-color);
+      border: 1px solid var(--primary-color);
+      border-radius: 5px;
+      font-size: 12px;
+      font-weight: 500;
+      letter-spacing: 0.2px;
       cursor: pointer;
-      transition: all 0.15s;
+      transition: background 0.15s, color 0.15s, border-color 0.15s;
     }
 
     .try-it-send:hover:not(:disabled) {
-      background: var(--primary-hover);
-      transform: translateY(-1px);
+      background: var(--primary-color);
+      color: #fff;
     }
 
     .try-it-send:disabled {
-      opacity: 0.6;
+      opacity: 0.5;
       cursor: not-allowed;
     }