style: add header link padding
This commit is contained in:
Peter Steinberger
parent
1a3bfee731
commit
8a5dfe2285
@ -3,7 +3,7 @@ export function siteCss() {
|
||||
:root{--bg:#0b0b0c;--paper:#111112;--paper-2:#151313;--ink:#f4f1ef;--text:#aaa2a0;--muted:#7b7472;--line:#201f20;--line-strong:#292728;--soft:#1b1513;--brand:#ff8a5f;--brand-2:#d15035;--code:#1b1a1a;--code-text:#e7ded9;--shadow:0 20px 70px rgba(0,0,0,.34);color-scheme:dark}
|
||||
:root[data-theme="light"]{--bg:#fbfaf7;--paper:#fffdfa;--paper-2:#fffaf4;--ink:#171514;--text:#413b37;--muted:#716a66;--line:#e8ddd5;--line-strong:#ded0c7;--soft:#f6e9e1;--brand:#d75a37;--brand-2:#b64227;--code:#15120f;--code-text:#f5efe8;--shadow:0 20px 70px rgba(32,24,18,.10);color-scheme:light}
|
||||
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:132px}body{margin:0;background:var(--bg);color:var(--text);font:15px/1.75 ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}a:hover{color:var(--ink)}img{max-width:100%;height:auto}button,input,select{font:inherit}.hidden{display:none!important}:root[data-theme="dark"] .dark\\:hidden{display:none!important}:root[data-theme="dark"] .dark\\:block{display:block!important}:root[data-theme="light"] .dark\\:block{display:none!important}
|
||||
.site-header{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}.header-row,.tabs{max-width:none;margin:0}.doc-shell{max-width:1280px;margin:0 auto}.header-row{height:88px;display:grid;grid-template-columns:minmax(330px,1fr) minmax(420px,650px) minmax(420px,1fr);gap:28px;align-items:center;padding:0 clamp(24px,2.4vw,48px)}.header-left{display:flex;align-items:center;gap:24px;min-width:0}.brand{display:inline-flex;align-items:center;flex:0 0 auto}.brand img{width:27px;height:27px;image-rendering:pixelated}.language-picker{position:relative;min-width:0}.language-trigger{height:38px;border:0;border-radius:999px;background:transparent;color:var(--ink);display:flex;align-items:center;gap:9px;max-width:190px;padding:0;cursor:pointer;box-shadow:none}.language-trigger:hover,.language-picker.open .language-trigger{background:transparent;color:var(--ink)}.locale-flag{width:23px;height:23px;border-radius:50%;display:inline-grid;place-items:center;font-size:19px;line-height:1;overflow:hidden;flex:0 0 auto}.language-current{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px;color:var(--ink)}.language-chevron{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;color:var(--muted);line-height:1;transition:transform .16s ease,color .16s ease}.language-chevron .icon{width:16px;height:16px}.language-picker.open .language-chevron{transform:rotate(180deg);color:var(--brand)}.language-menu{position:absolute;top:calc(100% + 10px);left:0;width:min(340px,calc(100vw - 32px));max-height:min(72vh,720px);overflow:auto;display:none;z-index:80;padding:10px;background:color-mix(in srgb,var(--bg) 92%,#000 8%);border:1px solid var(--line-strong);border-radius:22px;box-shadow:0 30px 90px rgba(0,0,0,.52),inset 0 1px 0 rgba(255,255,255,.03)}.language-picker.open .language-menu{display:block}.language-option{display:grid;grid-template-columns:30px minmax(0,1fr) 22px;align-items:center;gap:12px;padding:12px 16px;border-radius:16px;color:var(--ink);font-weight:800;font-size:18px;line-height:1.2}.language-option:hover{background:color-mix(in srgb,var(--paper-2) 84%,transparent);color:var(--ink)}.language-option.active{color:var(--brand)}.language-option.active:hover{background:color-mix(in srgb,var(--soft) 84%,transparent)}.language-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.language-check{opacity:0;color:var(--brand);font-size:19px;text-align:right}.language-option.active .language-check{opacity:1}.icon{display:block;width:18px;height:18px;min-width:18px;max-width:18px;flex:0 0 18px}.search-button{height:60px;border:1px solid var(--line-strong);border-radius:15px;background:color-mix(in srgb,var(--paper) 86%,transparent);color:var(--muted);display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:0 20px;cursor:pointer;text-align:left;box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}.search-button:hover{border-color:color-mix(in srgb,var(--brand) 42%,var(--line));color:var(--text)}.search-label{min-width:0;font-size:18px;color:var(--muted)}.search-shortcut{font-size:13px;color:var(--muted)}.header-links{display:flex;align-items:center;justify-content:flex-end;gap:26px;color:var(--muted);font-size:15px;white-space:nowrap}.header-links a{display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-weight:650}.header-links a:hover{color:var(--ink)}.header-links a .icon{width:18px;height:18px;color:var(--ink)}.header-links button{border:0;background:transparent;color:var(--muted);cursor:pointer;padding:4px}.header-links button:hover{color:var(--ink)}.theme-toggle{display:inline-grid;place-items:center;width:28px;height:28px}.theme-toggle .icon{width:18px;height:18px}.nav-toggle{display:none;border:1px solid var(--line-strong);background:var(--paper);color:var(--ink);border-radius:8px;padding:7px 10px}
|
||||
.site-header{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}.header-row,.tabs{max-width:none;margin:0}.doc-shell{max-width:1280px;margin:0 auto}.header-row{height:88px;display:grid;grid-template-columns:minmax(330px,1fr) minmax(420px,650px) minmax(420px,1fr);gap:28px;align-items:center;padding:0 clamp(24px,2.4vw,48px)}.header-left{display:flex;align-items:center;gap:24px;min-width:0}.brand{display:inline-flex;align-items:center;flex:0 0 auto}.brand img{width:27px;height:27px;image-rendering:pixelated}.language-picker{position:relative;min-width:0}.language-trigger{height:38px;border:0;border-radius:999px;background:transparent;color:var(--ink);display:flex;align-items:center;gap:9px;max-width:190px;padding:0;cursor:pointer;box-shadow:none}.language-trigger:hover,.language-picker.open .language-trigger{background:transparent;color:var(--ink)}.locale-flag{width:23px;height:23px;border-radius:50%;display:inline-grid;place-items:center;font-size:19px;line-height:1;overflow:hidden;flex:0 0 auto}.language-current{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px;color:var(--ink)}.language-chevron{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;color:var(--muted);line-height:1;transition:transform .16s ease,color .16s ease}.language-chevron .icon{width:16px;height:16px}.language-picker.open .language-chevron{transform:rotate(180deg);color:var(--brand)}.language-menu{position:absolute;top:calc(100% + 10px);left:0;width:min(340px,calc(100vw - 32px));max-height:min(72vh,720px);overflow:auto;display:none;z-index:80;padding:10px;background:color-mix(in srgb,var(--bg) 92%,#000 8%);border:1px solid var(--line-strong);border-radius:22px;box-shadow:0 30px 90px rgba(0,0,0,.52),inset 0 1px 0 rgba(255,255,255,.03)}.language-picker.open .language-menu{display:block}.language-option{display:grid;grid-template-columns:30px minmax(0,1fr) 22px;align-items:center;gap:12px;padding:12px 16px;border-radius:16px;color:var(--ink);font-weight:800;font-size:18px;line-height:1.2}.language-option:hover{background:color-mix(in srgb,var(--paper-2) 84%,transparent);color:var(--ink)}.language-option.active{color:var(--brand)}.language-option.active:hover{background:color-mix(in srgb,var(--soft) 84%,transparent)}.language-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.language-check{opacity:0;color:var(--brand);font-size:19px;text-align:right}.language-option.active .language-check{opacity:1}.icon{display:block;width:18px;height:18px;min-width:18px;max-width:18px;flex:0 0 18px}.search-button{height:60px;border:1px solid var(--line-strong);border-radius:15px;background:color-mix(in srgb,var(--paper) 86%,transparent);color:var(--muted);display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:0 20px;cursor:pointer;text-align:left;box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}.search-button:hover{border-color:color-mix(in srgb,var(--brand) 42%,var(--line));color:var(--text)}.search-label{min-width:0;font-size:18px;color:var(--muted)}.search-shortcut{font-size:13px;color:var(--muted)}.header-links{display:flex;align-items:center;justify-content:flex-end;gap:26px;color:var(--muted);font-size:15px;white-space:nowrap}.header-links a{display:inline-flex;align-items:center;gap:10px;color:var(--muted);font-weight:650}.header-links a:hover{color:var(--ink)}.header-links a .icon{width:18px;height:18px;color:var(--ink)}.header-links button{border:0;background:transparent;color:var(--muted);cursor:pointer;padding:4px}.header-links button:hover{color:var(--ink)}.theme-toggle{display:inline-grid;place-items:center;width:28px;height:28px}.theme-toggle .icon{width:18px;height:18px}.nav-toggle{display:none;border:1px solid var(--line-strong);background:var(--paper);color:var(--ink);border-radius:8px;padding:7px 10px}
|
||||
.tabs{position:relative;display:flex;align-items:center;gap:35px;min-height:68px;padding:0 clamp(24px,2.4vw,48px);overflow-x:auto;white-space:nowrap}.tab-link{position:relative;color:var(--muted);font-weight:700;font-size:16px;padding:20px 0 21px;transition:color .18s ease}.tab-link:hover{color:var(--ink)}.tab-link.active{color:var(--ink)}.tab-underline{position:absolute;left:0;bottom:0;height:2px;width:var(--tu-w,0);transform:translate3d(var(--tu-x,0),0,0);background:var(--brand);border-radius:2px;pointer-events:none;opacity:0;will-change:transform,width;transition:transform .28s cubic-bezier(.4,0,.2,1),width .28s cubic-bezier(.4,0,.2,1),opacity .18s ease}.tabs.is-ready .tab-underline{opacity:1}.tab-underline.no-transition{transition:none}@media(prefers-reduced-motion:reduce){.tab-underline{transition:opacity .18s ease}}
|
||||
.doc-shell{display:grid;grid-template-columns:220px minmax(0,1fr);gap:46px;padding:40px 22px 90px}.sidebar{position:sticky;top:143px;align-self:start;max-height:calc(100vh - 166px);overflow:auto;padding-right:6px}.nav-section{margin:0 0 34px}.nav-section h2{font:750 13px/1.2 ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);letter-spacing:0;margin:0 0 14px}.nav-link{display:block;color:var(--muted);border-radius:8px;padding:6px 12px;margin:2px 0;font-size:14px;line-height:1.55}.nav-link:hover{color:var(--ink);background:color-mix(in srgb,var(--paper) 68%,transparent)}.nav-link.active{background:var(--soft);color:var(--brand);font-weight:750}.nav-nested{padding-left:10px;border-left:1px solid var(--line);margin:9px 0 0 6px}.nav-nested h2{font-size:12px;color:var(--muted);margin:0 0 5px;text-transform:none}
|
||||
.main{min-width:0;display:grid;grid-template-columns:minmax(0,680px) 210px;gap:60px;align-items:start}.article{min-width:0}.article-header{margin:0 0 38px}.article-kicker{color:var(--brand);font-weight:800;font-size:13px;margin:0 0 8px}.article h1{font:760 30px/1.12 ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:0;color:var(--ink);margin:0}.doc{font-size:15px}.doc>h1:first-child{display:none}.doc h2{font:760 25px/1.22 ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);margin:3.0em 0 .65em}.doc h3{font:720 18px/1.28 ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);margin:1.8em 0 .45em}.doc h4{font:700 15px/1.35 ui-sans-serif,system-ui,sans-serif;color:var(--ink);margin:1.4em 0 .35em}.doc p,.doc ul,.doc ol,.doc blockquote,.doc table{margin-top:0;margin-bottom:1.12em}.doc ul,.doc ol{padding-left:1.35rem}.doc li{margin:.24em 0}.doc strong{color:var(--ink);font-weight:800}.doc code{background:var(--code);border:1px solid var(--line-strong);border-radius:5px;padding:.08em .36em;font-size:.86em;color:var(--code-text)}.doc pre{position:relative;overflow:auto;background:var(--code);color:var(--code-text);border-radius:10px;padding:16px 18px;border:1px solid var(--line-strong);box-shadow:var(--shadow)}.doc pre code{background:transparent;border:0;color:inherit;padding:0}.doc blockquote{border-left:3px solid var(--line-strong);padding-left:24px;color:var(--text);font-style:italic}.doc table{width:100%;border-collapse:collapse;font-size:14px}.doc th,.doc td{border-bottom:1px solid var(--line);padding:9px;text-align:left;vertical-align:top}.doc th{color:var(--ink);background:var(--paper)}.doc p[align="center"]{text-align:center}.doc p[align="center"] img{margin:0 auto}.anchor{color:var(--muted);padding-right:.35em;text-decoration:none;opacity:.5}.anchor:hover{opacity:1;text-decoration:none}
|
||||
@ -12,7 +12,7 @@ export function siteCss() {
|
||||
.oc-steps{counter-reset:step;list-style:none;padding-left:0!important}.oc-step{counter-increment:step;border-left:2px solid var(--line);padding:0 0 12px 22px;position:relative}.oc-step:before{content:counter(step);position:absolute;left:-13px;top:0;width:24px;height:24px;border-radius:50%;background:var(--brand);color:#111;display:grid;place-items:center;font-size:12px;font-weight:800}.oc-step h3{margin-top:0}.oc-callout{border:1px solid var(--line-strong);border-left:4px solid var(--brand);background:var(--paper);border-radius:10px;padding:13px 15px;margin:18px 0}.oc-callout-warning{border-left-color:#d97706}.oc-callout-tip,.oc-callout-check{border-left-color:#48b49a}.oc-tabs{display:grid;gap:10px;margin:16px 0}.oc-tab,.oc-param,.oc-frame,.oc-code-group{border:1px solid var(--line-strong);background:var(--paper);border-radius:10px;padding:13px 15px;margin:12px 0}.oc-tab h3{margin-top:0}.oc-accordion{border:1px solid var(--line-strong);background:var(--paper);border-radius:10px;margin:10px 0;padding:0 13px}.oc-accordion summary{cursor:pointer;color:var(--ink);font-weight:750;padding:12px 0}.oc-param header{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:8px}.oc-param-type,.oc-param-required{border:1px solid var(--line-strong);border-radius:999px;padding:1px 7px;font-size:12px;color:var(--muted)}.oc-param-required{color:var(--brand)}
|
||||
.page-nav{display:grid;grid-template-columns:1fr 1fr;gap:14px;border-top:1px solid var(--line);margin-top:44px;padding-top:18px}.page-nav a{border:1px solid var(--line-strong);background:var(--paper);border-radius:10px;padding:13px;color:var(--text)}.page-nav a:hover{border-color:var(--brand)}.page-nav small{display:block;color:var(--muted);font-size:11px;text-transform:uppercase}.next{text-align:right}
|
||||
.search-modal{position:fixed;inset:0;background:rgba(0,0,0,.62);display:none;z-index:50;padding:8vh 18px}.search-modal.open{display:block}.search-panel{max-width:760px;margin:0 auto;background:var(--paper);border:1px solid var(--line-strong);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}.search-head{display:flex;gap:10px;padding:12px;border-bottom:1px solid var(--line)}.search-head input{flex:1;border:1px solid var(--line-strong);border-radius:10px;padding:10px;background:var(--bg);color:var(--text)}.search-head button{border:1px solid var(--line-strong);background:var(--paper-2);color:var(--text);border-radius:9px;padding:0 12px}.search-results{max-height:62vh;overflow:auto;padding:8px 12px 14px}.search-result{display:block;border-bottom:1px solid var(--line);padding:12px;color:var(--text)}.search-result strong{display:block;color:var(--ink)}.search-result p{margin:.35em 0 0;color:var(--muted);font-size:13px}
|
||||
.docs-chat{position:fixed;right:22px;bottom:22px;z-index:60}.docs-chat-launcher{height:46px;border:1px solid color-mix(in srgb,var(--brand) 62%,var(--line));border-radius:999px;background:var(--ink);color:var(--bg);display:flex;align-items:center;gap:9px;padding:0 17px;font-weight:850;cursor:pointer;box-shadow:0 16px 50px rgba(0,0,0,.34)}.docs-chat-launcher:hover{background:var(--brand);color:#120f0e}.docs-chat-launcher span:first-child{color:var(--brand);line-height:1}.docs-chat-launcher:hover span:first-child{color:#120f0e}.docs-chat-panel{position:absolute;right:0;bottom:60px;width:min(410px,calc(100vw - 28px));max-height:min(680px,calc(100vh - 120px));display:none;grid-template-rows:auto minmax(180px,1fr) auto;background:color-mix(in srgb,var(--paper) 94%,#000 6%);border:1px solid var(--line-strong);border-radius:18px;box-shadow:0 28px 90px rgba(0,0,0,.55);overflow:hidden}.docs-chat.open .docs-chat-panel{display:grid}.docs-chat-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:16px 16px 13px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--paper-2) 88%,transparent)}.docs-chat-head p{margin:0 0 2px;color:var(--brand);font-size:12px;font-weight:850;text-transform:uppercase}.docs-chat-head h2{margin:0;color:var(--ink);font:760 19px/1.1 ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.docs-chat-head button{border:0;background:transparent;color:var(--muted);font-size:26px;line-height:1;cursor:pointer}.docs-chat-head button:hover{color:var(--ink)}.docs-chat-log{overflow:auto;padding:14px;display:flex;flex-direction:column;gap:10px}.docs-chat-message{max-width:92%;border:1px solid var(--line);border-radius:14px;padding:10px 12px;white-space:pre-wrap;overflow-wrap:anywhere}.docs-chat-message p{margin:0 0 .7em}.docs-chat-message p:last-child{margin-bottom:0}.docs-chat-message a{color:var(--brand);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}.docs-chat-message code{background:var(--code);border:1px solid var(--line-strong);border-radius:5px;padding:.05em .32em;color:var(--code-text);font-size:.9em}.docs-chat-message.user{align-self:flex-end;background:var(--brand);border-color:var(--brand);color:#14100f}.docs-chat-message.assistant{align-self:flex-start;background:var(--paper-2);color:var(--text)}.docs-chat-message.thinking{padding:14px;min-height:42px;display:inline-flex;align-items:center}.docs-chat-thinking{display:inline-flex;gap:7px;align-items:flex-end;height:14px}.docs-chat-thinking span{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:docs-chat-dot 1.25s cubic-bezier(.4,0,.2,1) infinite;will-change:transform,opacity,background-color}.docs-chat-thinking span:nth-child(2){animation-delay:.18s}.docs-chat-thinking span:nth-child(3){animation-delay:.36s}@keyframes docs-chat-dot{0%,80%,100%{opacity:.3;transform:translateY(0) scale(.85);background:var(--muted)}40%{opacity:1;transform:translateY(-5px) scale(1);background:var(--brand)}}@media(prefers-reduced-motion:reduce){.docs-chat-thinking span{animation-duration:2.4s;animation-name:docs-chat-dot-fade}@keyframes docs-chat-dot-fade{0%,100%{opacity:.35}50%{opacity:1}}}.docs-chat-message.error{border-color:#8b2f28;color:#ffb4a8;background:color-mix(in srgb,#401510 35%,var(--paper))}.docs-chat-form{display:grid;grid-template-columns:1fr auto;gap:10px;padding:12px;border-top:1px solid var(--line);background:var(--paper)}.docs-chat-form textarea{resize:none;min-height:44px;max-height:130px;border:1px solid var(--line-strong);border-radius:12px;background:var(--bg);color:var(--ink);padding:10px 11px;line-height:1.35}.docs-chat-form textarea:focus{outline:2px solid color-mix(in srgb,var(--brand) 42%,transparent);border-color:var(--brand)}.docs-chat-form button{align-self:end;height:42px;border:1px solid var(--brand);border-radius:12px;background:var(--brand);color:#15100e;font-weight:850;padding:0 15px;cursor:pointer}.docs-chat-form button:disabled{opacity:.55;cursor:wait}
|
||||
.docs-chat{position:fixed;right:22px;bottom:22px;z-index:60}.docs-chat-launcher{height:46px;border:1px solid color-mix(in srgb,var(--brand) 62%,var(--line));border-radius:999px;background:var(--ink);color:var(--bg);display:flex;align-items:center;gap:9px;padding:0 17px;font-weight:850;cursor:pointer;box-shadow:0 16px 50px rgba(0,0,0,.34)}.docs-chat-launcher:hover{background:var(--brand);color:#120f0e}.docs-chat-launcher span:first-child{color:var(--brand);line-height:1}.docs-chat-launcher:hover span:first-child{color:#120f0e}.docs-chat-panel{position:absolute;right:0;bottom:60px;width:min(410px,calc(100vw - 28px));max-height:min(680px,calc(100vh - 120px));display:none;grid-template-rows:auto minmax(180px,1fr) auto;background:color-mix(in srgb,var(--paper) 94%,#000 6%);border:1px solid var(--line-strong);border-radius:18px;box-shadow:0 28px 90px rgba(0,0,0,.55);overflow:hidden}.docs-chat.open .docs-chat-panel{display:grid}.docs-chat-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:16px 16px 13px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--paper-2) 88%,transparent)}.docs-chat-head p{margin:0 0 2px;color:var(--brand);font-size:12px;font-weight:850;text-transform:uppercase}.docs-chat-head h2{margin:0;color:var(--ink);font:760 19px/1.1 ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.docs-chat-head button{border:0;background:transparent;color:var(--muted);font-size:26px;line-height:1;cursor:pointer}.docs-chat-head button:hover{color:var(--ink)}.docs-chat-actions{display:flex;align-items:center;gap:8px}.docs-chat-head .docs-chat-clear{font-size:12px;font-weight:750;color:var(--muted);padding:6px 10px;border:1px solid var(--line-strong);border-radius:8px;background:transparent;letter-spacing:.06em;text-transform:uppercase;line-height:1;height:28px;display:inline-flex;align-items:center;transition:color .15s ease,border-color .15s ease}.docs-chat-head .docs-chat-clear:hover{color:var(--ink);border-color:color-mix(in srgb,var(--brand) 60%,var(--line-strong))}.docs-chat-head .docs-chat-clear[hidden]{display:none}.docs-chat-log{overflow:auto;padding:14px;display:flex;flex-direction:column;gap:10px}.docs-chat-message{max-width:92%;border:1px solid var(--line);border-radius:14px;padding:10px 12px;white-space:pre-wrap;overflow-wrap:anywhere}.docs-chat-message p{margin:0 0 .7em}.docs-chat-message p:last-child{margin-bottom:0}.docs-chat-message a{color:var(--brand);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}.docs-chat-message code{background:var(--code);border:1px solid var(--line-strong);border-radius:5px;padding:.05em .32em;color:var(--code-text);font-size:.9em}.docs-chat-message.user{align-self:flex-end;background:var(--brand);border-color:var(--brand);color:#14100f}.docs-chat-message.assistant{align-self:flex-start;background:var(--paper-2);color:var(--text)}.docs-chat-message.thinking{padding:14px;min-height:42px;display:inline-flex;align-items:center}.docs-chat-thinking{display:inline-flex;gap:7px;align-items:flex-end;height:14px}.docs-chat-thinking span{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:docs-chat-dot 1.25s cubic-bezier(.4,0,.2,1) infinite;will-change:transform,opacity,background-color}.docs-chat-thinking span:nth-child(2){animation-delay:.18s}.docs-chat-thinking span:nth-child(3){animation-delay:.36s}@keyframes docs-chat-dot{0%,80%,100%{opacity:.3;transform:translateY(0) scale(.85);background:var(--muted)}40%{opacity:1;transform:translateY(-5px) scale(1);background:var(--brand)}}@media(prefers-reduced-motion:reduce){.docs-chat-thinking span{animation-duration:2.4s;animation-name:docs-chat-dot-fade}@keyframes docs-chat-dot-fade{0%,100%{opacity:.35}50%{opacity:1}}}.docs-chat-message.error{border-color:#8b2f28;color:#ffb4a8;background:color-mix(in srgb,#401510 35%,var(--paper))}.docs-chat-form{display:grid;grid-template-columns:1fr auto;gap:10px;padding:12px;border-top:1px solid var(--line);background:var(--paper)}.docs-chat-form textarea{resize:none;min-height:44px;max-height:130px;border:1px solid var(--line-strong);border-radius:12px;background:var(--bg);color:var(--ink);padding:10px 11px;line-height:1.35}.docs-chat-form textarea:focus{outline:2px solid color-mix(in srgb,var(--brand) 42%,transparent);border-color:var(--brand)}.docs-chat-form button{align-self:end;height:42px;border:1px solid var(--brand);border-radius:12px;background:var(--brand);color:#15100e;font-weight:850;padding:0 15px;cursor:pointer}.docs-chat-form button:disabled{opacity:.55;cursor:wait}
|
||||
@media(max-width:1120px){.header-row{grid-template-columns:auto 1fr auto}.header-links a{display:none}.doc-shell{grid-template-columns:210px minmax(0,1fr);gap:34px}.main{grid-template-columns:minmax(0,1fr)}.toc{display:none}}@media(max-width:820px){html{scroll-padding-top:78px}.site-header{position:sticky}.header-row{height:auto;min-height:62px;grid-template-columns:1fr auto;padding:10px 16px;gap:12px}.header-left{order:1}.language-trigger{max-width:58vw}.language-menu{width:min(390px,calc(100vw - 32px));max-height:min(72vh,620px)}.search-button{order:3;grid-column:1/-1;width:100%}.header-links{order:2}.nav-toggle{display:inline-flex}.tabs{display:none}.doc-shell{display:block;padding:24px 18px 86px}.sidebar{position:fixed;inset:0 18% 0 0;z-index:45;transform:translateX(-100%);transition:transform .2s ease;background:var(--bg);border-right:1px solid var(--line);padding:22px 18px;max-height:none}.sidebar.open{transform:translateX(0)}.article h1{font-size:30px}.oc-card-grid,.oc-card-group{grid-template-columns:1fr}.next{text-align:left}.page-nav{grid-template-columns:1fr}.docs-chat{right:14px;bottom:14px}.docs-chat-launcher{height:44px;padding:0 14px}.docs-chat-panel{bottom:56px;width:calc(100vw - 28px);max-height:calc(100vh - 92px)}}
|
||||
`;
|
||||
}
|
||||
@ -40,7 +40,9 @@ function compactGithubLinks(text){return String(text).replace(/(^|[\\s>])https:\
|
||||
function renderChatText(text){return escapeHtml(compactGithubLinks(text)).replace(/\\[([^\\]]+)\\]\\((https?:\\/\\/[^\\s)]+)\\)/g,(_,label,url)=>'<a href="'+url+'" target="_blank" rel="noopener noreferrer">'+label+"</a>").replace(/\`([^\`]+)\`/g,"<code>$1</code>").replace(/\\n{2,}/g,"</p><p>").replace(/\\n/g,"<br>")}
|
||||
function addChatMessage(kind,text){const log=document.querySelector("[data-chat-log]");if(!log)return null;const item=document.createElement("div");item.className="docs-chat-message "+kind;item.innerHTML="<p>"+renderChatText(text)+"</p>";log.appendChild(item);log.scrollTop=log.scrollHeight;return item}
|
||||
function addChatThinking(){const log=document.querySelector("[data-chat-log]");if(!log)return null;const item=document.createElement("div");item.className="docs-chat-message assistant thinking";item.setAttribute("aria-label","Thinking");item.innerHTML='<div class="docs-chat-thinking" role="status" aria-live="polite"><span></span><span></span><span></span></div>';log.appendChild(item);log.scrollTop=log.scrollHeight;return item}
|
||||
function initChat(){const chat=document.querySelector("[data-docs-chat]");const form=document.querySelector("[data-chat-form]");const input=document.querySelector("[data-chat-input]");const submit=document.querySelector("[data-chat-submit]");if(!chat||!form||!input)return;const setOpen=open=>{chat.classList.toggle("open",open);document.querySelector("[data-chat-toggle]")?.setAttribute("aria-expanded",String(open));if(open)setTimeout(()=>input.focus(),0)};document.addEventListener("click",e=>{if(e.target.closest("[data-chat-toggle]")){setOpen(!chat.classList.contains("open"));return}if(e.target.closest("[data-chat-close]"))setOpen(false)});input.addEventListener("keydown",e=>{if(e.key==="Enter"&&!e.shiftKey){e.preventDefault();form.requestSubmit()}});form.addEventListener("submit",async e=>{e.preventDefault();const api=window.OPENCLAW_DOCS_CHAT_API;const message=input.value.trim();if(!api||!message)return;input.value="";addChatMessage("user",message);const reply=addChatThinking();submit.disabled=true;try{const res=await fetch(api,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({message,model:"gpt-5-mini",retrieval:"auto",confidenceThreshold:.3})});if(!res.ok)throw new Error("Docs agent returned "+res.status);if(!res.body)throw new Error("Docs agent did not stream a response");const reader=res.body.getReader();const decoder=new TextDecoder();let raw="";while(true){const {done,value}=await reader.read();if(done)break;raw+=decoder.decode(value,{stream:true});if(reply&&raw.trim()){if(reply.classList.contains("thinking"))reply.classList.remove("thinking");reply.innerHTML="<p>"+renderChatText(raw)+"</p>";reply.parentElement.scrollTop=reply.parentElement.scrollHeight}}if(!raw&&reply){reply.classList.remove("thinking");reply.innerHTML="<p>No response.</p>"}}catch(err){if(reply){reply.className="docs-chat-message error";reply.innerHTML="<p>"+escapeHtml(err?.message||"Docs agent failed.")+"</p>"}}finally{submit.disabled=false;input.focus()}})}
|
||||
function setChatClearVisible(visible){const btn=document.querySelector("[data-chat-clear]");if(!btn)return;if(visible)btn.removeAttribute("hidden");else btn.setAttribute("hidden","")}
|
||||
function clearChat(){const log=document.querySelector("[data-chat-log]");if(!log)return;log.innerHTML='<div class="docs-chat-message assistant"><p>Ask about install, channels, gateway config, or plugin APIs.</p></div>';log.scrollTop=0;setChatClearVisible(false);document.querySelector("[data-chat-input]")?.focus()}
|
||||
function initChat(){const chat=document.querySelector("[data-docs-chat]");const form=document.querySelector("[data-chat-form]");const input=document.querySelector("[data-chat-input]");const submit=document.querySelector("[data-chat-submit]");if(!chat||!form||!input)return;const setOpen=open=>{chat.classList.toggle("open",open);document.querySelector("[data-chat-toggle]")?.setAttribute("aria-expanded",String(open));if(open)setTimeout(()=>input.focus(),0)};document.addEventListener("click",e=>{if(e.target.closest("[data-chat-toggle]")){setOpen(!chat.classList.contains("open"));return}if(e.target.closest("[data-chat-close]")){setOpen(false);return}if(e.target.closest("[data-chat-clear]")){clearChat();return}});input.addEventListener("keydown",e=>{if(e.key==="Enter"&&!e.shiftKey){e.preventDefault();form.requestSubmit()}});form.addEventListener("submit",async e=>{e.preventDefault();const api=window.OPENCLAW_DOCS_CHAT_API;const message=input.value.trim();if(!api||!message)return;input.value="";addChatMessage("user",message);setChatClearVisible(true);const reply=addChatThinking();submit.disabled=true;try{const res=await fetch(api,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({message,model:"gpt-5-mini",retrieval:"auto",confidenceThreshold:.3})});if(!res.ok)throw new Error("Docs agent returned "+res.status);if(!res.body)throw new Error("Docs agent did not stream a response");const reader=res.body.getReader();const decoder=new TextDecoder();let raw="";while(true){const {done,value}=await reader.read();if(done)break;raw+=decoder.decode(value,{stream:true});if(reply&&raw.trim()){if(reply.classList.contains("thinking"))reply.classList.remove("thinking");reply.innerHTML="<p>"+renderChatText(raw)+"</p>";reply.parentElement.scrollTop=reply.parentElement.scrollHeight}}if(!raw&&reply){reply.classList.remove("thinking");reply.innerHTML="<p>No response.</p>"}}catch(err){if(reply){reply.className="docs-chat-message error";reply.innerHTML="<p>"+escapeHtml(err?.message||"Docs agent failed.")+"</p>"}}finally{submit.disabled=false;input.focus()}})}
|
||||
initChat();
|
||||
document.addEventListener("click",async e=>{const theme=e.target.closest("[data-theme-toggle]");if(theme){const next=root.dataset.theme==="dark"?"light":"dark";root.dataset.theme=next;localStorage.setItem("theme",next);return}const trigger=e.target.closest("[data-language-trigger]");if(trigger){e.stopPropagation();toggleLanguage();return}const picker=document.querySelector("[data-language-picker]");if(picker&&!picker.contains(e.target))closeLanguage();const navToggle=e.target.closest("[data-nav-toggle]");if(navToggle){document.querySelector(".sidebar")?.classList.toggle("open");return}if(e.target.closest("[data-search-open]")){openSearch();return}if(e.target.closest("[data-search-close]")){modal?.classList.remove("open");return}const link=e.target.closest("a[href]");if(!link)return;if(link.closest("[data-language-picker]"))return;if(link.target||link.download||!isPlainLeftClick(e))return;const url=new URL(link.href,location.href);if(url.pathname===location.pathname&&url.search===location.search&&url.hash)return;if(!isDocsPage(url))return;e.preventDefault();modal?.classList.remove("open");const ok=await navigateTo(url);if(!ok)location.href=url.href});
|
||||
modal?.addEventListener("click",e=>{if(e.target===modal)modal.classList.remove("open")});addEventListener("keydown",e=>{if((e.metaKey||e.ctrlKey)&&e.key.toLowerCase()==="k"){e.preventDefault();openSearch()}if(e.key==="Escape"){modal?.classList.remove("open");closeLanguage()}});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user