kontexta 4.3.1

package/bundle/standalone/node_modules/kxta-publish/dist/template/api-ref.css

@@ -0,0 +1,593 @@
+/* ---- api-ref theme — code-focused, dense, monospace-heavy ---- */
+:root {
+  --accent: #0ea5e9;
+  --accent-soft: rgba(14,165,233,0.1);
+  --bg-primary: #0c1222;
+  --bg-secondary: #111827;
+  --bg-tertiary: #1e293b;
+  --text-primary: #e2e8f0;
+  --text-secondary: #94a3b8;
+  --muted: #64748b;
+  --border: rgba(14,165,233,0.15);
+  --success: #22c55e; --warning: #f59e0b; --danger: #ef4444;
+  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
+  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', ui-monospace, monospace;
+}
+.dark {
+  --accent-soft: rgba(56,189,248,0.12);
+  --bg-primary: #0a0e1a;
+  --bg-secondary: #0f1629;
+  --bg-tertiary: #151d32;
+  --text-primary: #e2e8f0;
+  --text-secondary: #94a3b8;
+  --muted: #64748b;
+  --border: rgba(56,189,248,0.12);
+}
+
+/* ---- base ---- */
+*, *::before, *::after { box-sizing: border-box; }
+html, body { margin: 0; padding: 0; }
+html {
+  scroll-behavior: smooth;
+  scroll-padding-top: 56px;
+}
+body {
+  font-family: var(--font-sans);
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+::selection { background: var(--accent); color: #fff; }
+code, pre, .api-method, .api-path { font-family: var(--font-mono); }
+.content h1, .content h2, .content h3,
+.brand, .nav-group-label { font-family: var(--font-mono); font-weight: 600; }
+
+/* ---- custom scrollbars ---- */
+::-webkit-scrollbar { width: 6px; height: 6px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover { background: var(--muted); }
+* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
+
+/* ---- three-pane layout (narrower columns) ---- */
+.layout {
+  display: grid;
+  grid-template-columns: 220px 1fr 180px;
+  grid-template-rows: auto 1fr;
+  grid-template-areas:
+    "topbar topbar topbar"
+    "sidebar content toc";
+  min-height: 100vh;
+}
+
+.topbar {
+  grid-area: topbar;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 14px;
+  height: 40px;
+  min-height: 40px;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg-secondary);
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+
+.sidebar {
+  grid-area: sidebar;
+  border-right: 1px solid var(--border);
+  background: var(--bg-secondary);
+  padding: 14px 10px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  font-size: 13px;
+}
+
+.content {
+  grid-area: content;
+  padding: 24px 36px;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.toc {
+  grid-area: toc;
+  border-left: 1px solid var(--border);
+  padding: 16px 12px;
+  overflow-y: auto;
+  position: sticky;
+  top: 40px;
+  height: calc(100vh - 40px);
+  align-self: start;
+  font-size: 12px;
+}
+
+/* ---- topbar ---- */
+.brand {
+  font-size: 10px;
+  font-weight: 700;
+  color: var(--accent);
+  text-transform: uppercase;
+  letter-spacing: 1.5px;
+}
+.topbar button {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  color: var(--text-secondary);
+  padding: 3px 9px;
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 11px;
+  margin-left: 6px;
+  font-family: var(--font-mono);
+  transition: all 0.12s;
+}
+.topbar button:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
+
+/* Mobile nav toggle — hidden on desktop */
+#nav-toggle { display: none; }
+
+/* Sidebar backdrop (mobile overlay) */
+.sidebar-backdrop {
+  display: none;
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.4);
+  z-index: 19;
+}
+.sidebar-backdrop.open {
+  display: block;
+}
+
+/* ---- sidebar nav ---- */
+.nav-group-label {
+  font-size: 9px;
+  text-transform: uppercase;
+  letter-spacing: 0.8px;
+  color: var(--muted);
+  margin: 0 0 5px 8px;
+  padding-top: 10px;
+  font-weight: 600;
+}
+.nav-group-label:first-child { padding-top: 4px; }
+
+.nav-item {
+  display: block;
+  padding: 4px 7px;
+  border-radius: 3px;
+  color: var(--text-secondary);
+  text-decoration: none;
+  font-size: 12px;
+  font-family: var(--font-mono);
+  transition: all 0.1s;
+}
+.nav-item:hover { background: var(--accent-soft); color: var(--text-primary); }
+.nav-item.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
+
+/* ---- TOC ---- */
+.toc-label {
+  font-size: 9px;
+  text-transform: uppercase;
+  letter-spacing: 0.8px;
+  color: var(--muted);
+  margin-bottom: 8px;
+  font-weight: 600;
+}
+.toc-item {
+  display: block;
+  font-size: 11px;
+  color: var(--muted);
+  text-decoration: none;
+  padding: 2px 0;
+  font-family: var(--font-mono);
+  transition: all 0.1s;
+  border-left: 2px solid transparent;
+}
+.toc-item:hover { color: var(--text-secondary); }
+.toc-item.active { color: var(--accent); font-weight: 600; border-left-color: var(--accent); padding-left: 6px; margin-left: -2px; }
+.toc-item.level-3 { padding-left: 10px; }
+.toc-item.level-3.active { padding-left: 14px; margin-left: -2px; }
+
+/* ---- content typography ---- */
+.content h1 {
+  font-size: 21px;
+  font-weight: 700;
+  color: var(--text-primary);
+  border-bottom: 1px solid var(--border);
+  padding-bottom: 6px;
+  letter-spacing: -0.02em;
+  margin: 0 0 14px 0;
+  line-height: 1.25;
+}
+
+.content h2 {
+  font-size: 17px;
+  font-weight: 600;
+  color: var(--accent);
+  border-bottom: 1px solid var(--border);
+  padding-bottom: 4px;
+  margin: 28px 0 10px 0;
+  line-height: 1.3;
+}
+
+.content h3 {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text-secondary);
+  margin: 22px 0 8px 0;
+  line-height: 1.4;
+}
+
+.content h4 {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-secondary);
+  margin: 18px 0 6px 0;
+}
+
+.content p {
+  margin: 0 0 12px 0;
+  line-height: 1.6;
+}
+.content p:last-child { margin-bottom: 0; }
+
+.content a { color: var(--accent); text-decoration: none; }
+.content a:hover { text-decoration: underline; }
+
+.content strong { font-weight: 600; }
+
+.content blockquote {
+  border-left: 3px solid var(--accent);
+  background: var(--accent-soft);
+  padding: 8px 12px;
+  border-radius: 4px;
+  color: var(--text-secondary);
+  font-size: 13px;
+  margin: 12px 0;
+}
+.content blockquote p { margin: 0; }
+
+.content ul, .content ol {
+  margin: 0 0 12px 0;
+  padding-left: 24px;
+}
+.content li { margin-bottom: 4px; line-height: 1.55; }
+
+.content hr {
+  border: none;
+  border-top: 1px solid var(--border);
+  margin: 24px 0;
+}
+
+.content table {
+  border-collapse: collapse;
+  width: 100%;
+  margin: 12px 0;
+  font-size: 13px;
+}
+.content th, .content td {
+  border: 1px solid var(--border);
+  padding: 5px 8px;
+}
+.content th { background: var(--bg-secondary); font-weight: 600; font-family: var(--font-mono); }
+
+.content pre {
+  background: var(--bg-secondary);
+  padding: 12px;
+  border-radius: 6px;
+  overflow: auto;
+  margin: 12px 0;
+  border: 1px solid var(--border);
+  font-size: 12px;
+  font-family: var(--font-mono);
+  line-height: 1.5;
+}
+.content pre code { background: none; padding: 0; border-radius: 0; font-size: inherit; }
+
+.content code {
+  background: var(--bg-secondary);
+  padding: 1px 5px;
+  border-radius: 3px;
+  font-size: 0.88em;
+  font-family: var(--font-mono);
+}
+
+/* ---- hero ---- */
+.hero { text-align: center; padding: 28px 12px; margin-bottom: 16px; }
+.hero .brand {
+  font-size: 10px;
+  font-weight: 700;
+  color: var(--accent);
+  text-transform: uppercase;
+  letter-spacing: 1.5px;
+  display: block;
+  margin-bottom: 6px;
+}
+.hero h1 {
+  font-size: 24px;
+  font-weight: 700;
+  margin: 0;
+  color: var(--text-primary);
+  border: none;
+  padding: 0;
+}
+
+/* ---- mermaid diagrams ---- */
+.mermaid-wrap {
+  position: relative;
+  background: var(--bg-secondary);
+  border-radius: 6px;
+  padding: 14px;
+  margin: 12px 0;
+  border: 1px solid var(--border);
+}
+.mermaid-zoom-bar {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  margin-bottom: 10px;
+}
+.mermaid-zoom-bar button {
+  background: var(--accent-soft);
+  border: 1px solid var(--border);
+  color: var(--text-primary);
+  padding: 3px 8px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 10px;
+  font-family: var(--font-mono);
+  transition: all 0.12s;
+}
+.mermaid-zoom-bar button:hover { background: var(--accent); color: #fff; }
+.mermaid-zoom-level { font-size: 9px; color: var(--muted); font-family: var(--font-mono); }
+.mermaid-stage { overflow: auto; max-height: 500px; }
+.mermaid-stage svg { max-width: 100%; height: auto; }
+.mermaid-stage:fullscreen { max-height: none; background: var(--bg-primary); }
+.mermaid-stage:fullscreen svg { max-width: 90vw; }
+
+/* Hide mermaid error divs (fallback if JS error detection fails) */
+.mermaid > div[id^="dmermaid"] { display: none !important; }
+
+/* ---- endpoint cards (dense, code-heavy) ---- */
+.api-endpoint {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: 5px;
+  padding: 8px 10px;
+  margin: 6px 0;
+  cursor: pointer;
+  transition: all 0.12s;
+  font-family: var(--font-mono);
+  font-size: 12px;
+}
+.api-endpoint:hover { background: var(--accent-soft); }
+.api-endpoint-header { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
+.api-method {
+  display: inline-block;
+  font-size: 9px;
+  font-weight: 700;
+  padding: 1px 5px;
+  border-radius: 3px;
+  margin-right: 6px;
+  font-family: var(--font-mono);
+  letter-spacing: 0.5px;
+}
+.api-method.get { background: rgba(34,197,94,0.12); color: var(--success); }
+.api-method.post { background: rgba(245,158,11,0.12); color: var(--warning); }
+.api-method.put { background: rgba(239,68,68,0.12); color: var(--danger); }
+.api-method.delete { background: rgba(239,68,68,0.15); color: var(--danger); }
+.api-path { font-size: 12px; color: var(--text-primary); word-break: break-all; }
+.api-desc { font-size: 11px; color: var(--muted); margin-top: 2px; font-family: var(--font-sans); }
+.api-badge-success { background: rgba(34,197,94,0.12); color: var(--success); padding: 1px 5px; border-radius: 3px; font-size: 9px; font-weight: 600; }
+.api-badge-warning { background: rgba(245,158,11,0.12); color: var(--warning); padding: 1px 5px; border-radius: 3px; font-size: 9px; font-weight: 600; }
+.api-badge-danger { background: rgba(239,68,68,0.12); color: var(--danger); padding: 1px 5px; border-radius: 3px; font-size: 9px; font-weight: 600; }
+
+/* ---- glossary grid ---- */
+.glossary-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+  gap: 8px;
+  margin: 12px 0;
+}
+.glossary-item {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: 5px;
+  padding: 10px;
+  transition: border-color 0.12s;
+}
+.glossary-item:hover { border-color: var(--accent); }
+.glossary-term { font-weight: 600; color: var(--accent); margin-bottom: 3px; font-family: var(--font-mono); font-size: 13px; }
+.glossary-def { font-size: 12px; color: var(--text-secondary); }
+
+/* ---- modal ---- */
+.modal {
+  position: fixed;
+  inset: 0;
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0,0,0,0.6);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.15s;
+}
+.modal.open { opacity: 1; pointer-events: auto; }
+.modal-card {
+  background: var(--bg-primary);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 16px;
+  max-width: 660px;
+  width: 90%;
+  max-height: 80vh;
+  overflow: auto;
+  position: relative;
+  box-shadow: 0 16px 48px rgba(0,0,0,0.4);
+}
+.modal-close {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  background: none;
+  border: none;
+  font-size: 14px;
+  color: var(--muted);
+  cursor: pointer;
+  font-family: var(--font-mono);
+  transition: color 0.12s;
+}
+.modal-close:hover { color: var(--text-primary); }
+.modal-section { margin: 8px 0; }
+.modal-section-title { font-weight: 600; color: var(--accent); margin-bottom: 4px; font-family: var(--font-mono); font-size: 13px; }
+.modal-section pre { background: var(--bg-secondary); padding: 8px; border-radius: 5px; overflow: auto; font-size: 11px; font-family: var(--font-mono); }
+
+/* ---- search palette ---- */
+.search-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 200;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding-top: 8vh;
+  background: rgba(0,0,0,0.5);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.12s;
+}
+.search-overlay.open { opacity: 1; pointer-events: auto; }
+.search-palette {
+  background: var(--bg-primary);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  width: 500px;
+  max-width: 90vw;
+  max-height: 60vh;
+  overflow: auto;
+  box-shadow: 0 16px 48px rgba(0,0,0,0.4);
+}
+.search-input {
+  width: 100%;
+  padding: 12px 16px;
+  border: none;
+  border-bottom: 1px solid var(--border);
+  background: transparent;
+  color: var(--text-primary);
+  font-size: 14px;
+  outline: none;
+  font-family: var(--font-mono);
+}
+.search-input::placeholder { color: var(--muted); }
+.search-results { padding: 5px; overflow-y: auto; }
+.search-result {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 7px 9px;
+  border-radius: 4px;
+  text-decoration: none;
+  color: var(--text-primary);
+  font-size: 12px;
+  font-family: var(--font-mono);
+  transition: background 0.1s;
+}
+.search-result:hover { background: var(--accent-soft); }
+.search-type {
+  font-size: 8px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--muted);
+  background: var(--bg-secondary);
+  padding: 1px 4px;
+  border-radius: 2px;
+  font-family: var(--font-mono);
+}
+.search-empty { padding: 14px; text-align: center; color: var(--muted); font-size: 12px; font-family: var(--font-mono); }
+
+/* ---- animations ---- */
+@keyframes slideUp {
+  from { transform: translateY(12px); opacity: 0; }
+  to { transform: translateY(0); opacity: 1; }
+}
+.search-result { animation: slideUp 0.1s ease-out; }
+.modal.open .modal-card { animation: slideUp 0.15s ease-out; }
+
+/* ---- responsive ---- */
+@media (max-width: 1100px) {
+  .content { padding: 24px 24px; }
+}
+
+@media (max-width: 1000px) {
+  .layout {
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      "topbar"
+      "content";
+  }
+  .sidebar {
+    display: none;
+    position: fixed;
+    inset: 40px auto 0 0;
+    width: 220px;
+    height: calc(100vh - 40px);
+    z-index: 20;
+    border-right: 1px solid var(--border);
+    box-shadow: 4px 0 20px rgba(0,0,0,0.3);
+  }
+  .sidebar.open { display: block; }
+  .toc { display: none; }
+  #nav-toggle { display: inline-flex; }
+  .content { padding: 20px 16px; }
+}
+
+@media (max-width: 600px) {
+  .topbar { padding: 0 10px; }
+  .brand { font-size: 9px; letter-spacing: 1px; }
+  .topbar button { padding: 3px 7px; font-size: 10px; }
+  .content { padding: 16px 12px; }
+  .content h1 { font-size: 18px; }
+  .content h2 { font-size: 16px; }
+  .glossary-grid { grid-template-columns: 1fr; }
+}
+
+/* ---- print ---- */
+@media print {
+  .topbar, .sidebar, .toc, .search-overlay, .modal, .mermaid-zoom-bar { display: none !important; }
+  .layout { grid-template-columns: 1fr !important; grid-template-areas: "content" !important; }
+  .content { padding: 0 !important; color: #000 !important; }
+  .content h1, .content h2, .content h3 { color: #000 !important; }
+  .content a { color: #000 !important; text-decoration: underline !important; }
+  .content pre { border: 1px solid #ccc !important; background: #f9f9f9 !important; }
+}
+
+/* ---- hero extras (logo + tagline) ---- */
+.hero-logo { display: block; margin: 0 auto 12px; max-width: 96px; max-height: 96px; }
+.hero-tagline { color: var(--text-secondary); font-size: 16px; margin: 6px 0 0; line-height: 1.5; max-width: 600px; margin-left: auto; margin-right: auto; }
+
+/* ---- copy-to-clipboard button on <pre> blocks ---- */
+.content pre.has-copy { position: relative; }
+.copy-btn {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  background: var(--bg-tertiary);
+  color: var(--text-secondary);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  padding: 3px 8px;
+  font-size: 11px;
+  font-family: var(--font-sans);
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.15s, color 0.15s, background 0.15s;
+}
+.content pre.has-copy:hover .copy-btn,
+.copy-btn:focus { opacity: 1; }
+.copy-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
+.copy-btn.copied { background: var(--success); color: #fff; border-color: var(--success); opacity: 1; }