diff --git a/.openclaw/tmp/after-desk-config-dark.png b/.openclaw/tmp/after-desk-config-dark.png new file mode 100644 index 0000000000..e8cbce37c1 Binary files /dev/null and b/.openclaw/tmp/after-desk-config-dark.png differ diff --git a/.openclaw/tmp/after-desk-config-light.png b/.openclaw/tmp/after-desk-config-light.png new file mode 100644 index 0000000000..6de68bf115 Binary files /dev/null and b/.openclaw/tmp/after-desk-config-light.png differ diff --git a/.openclaw/tmp/after-desk-home-dark.png b/.openclaw/tmp/after-desk-home-dark.png new file mode 100644 index 0000000000..737a38b1f3 Binary files /dev/null and b/.openclaw/tmp/after-desk-home-dark.png differ diff --git a/.openclaw/tmp/after-desk-home-light.png b/.openclaw/tmp/after-desk-home-light.png new file mode 100644 index 0000000000..2d6b8d00e0 Binary files /dev/null and b/.openclaw/tmp/after-desk-home-light.png differ diff --git a/.openclaw/tmp/after-mobile-nav-dark.png b/.openclaw/tmp/after-mobile-nav-dark.png new file mode 100644 index 0000000000..70a190a640 Binary files /dev/null and b/.openclaw/tmp/after-mobile-nav-dark.png differ diff --git a/.openclaw/tmp/after-mobile-nav-home-light.png b/.openclaw/tmp/after-mobile-nav-home-light.png new file mode 100644 index 0000000000..15dfb71be4 Binary files /dev/null and b/.openclaw/tmp/after-mobile-nav-home-light.png differ diff --git a/.openclaw/tmp/after-mobile-toc-dark.png b/.openclaw/tmp/after-mobile-toc-dark.png new file mode 100644 index 0000000000..f29aa9e35b Binary files /dev/null and b/.openclaw/tmp/after-mobile-toc-dark.png differ diff --git a/.openclaw/tmp/before-desk-config-dark.png b/.openclaw/tmp/before-desk-config-dark.png new file mode 100644 index 0000000000..09fc1d6865 Binary files /dev/null and b/.openclaw/tmp/before-desk-config-dark.png differ diff --git a/.openclaw/tmp/before-desk-config-light.png b/.openclaw/tmp/before-desk-config-light.png new file mode 100644 index 0000000000..f70a5386ce Binary files /dev/null and b/.openclaw/tmp/before-desk-config-light.png differ diff --git a/.openclaw/tmp/before-desk-home-dark.png b/.openclaw/tmp/before-desk-home-dark.png new file mode 100644 index 0000000000..4324e58e93 Binary files /dev/null and b/.openclaw/tmp/before-desk-home-dark.png differ diff --git a/.openclaw/tmp/before-desk-home-light.png b/.openclaw/tmp/before-desk-home-light.png new file mode 100644 index 0000000000..4d64be4eef Binary files /dev/null and b/.openclaw/tmp/before-desk-home-light.png differ diff --git a/.openclaw/tmp/before-mobile-nav-dark.png b/.openclaw/tmp/before-mobile-nav-dark.png new file mode 100644 index 0000000000..9e01e42b6d Binary files /dev/null and b/.openclaw/tmp/before-mobile-nav-dark.png differ diff --git a/.openclaw/tmp/before-mobile-nav-home-light.png b/.openclaw/tmp/before-mobile-nav-home-light.png new file mode 100644 index 0000000000..47d374e862 Binary files /dev/null and b/.openclaw/tmp/before-mobile-nav-home-light.png differ diff --git a/.openclaw/tmp/before-mobile-toc-dark.png b/.openclaw/tmp/before-mobile-toc-dark.png new file mode 100644 index 0000000000..871d085b46 Binary files /dev/null and b/.openclaw/tmp/before-mobile-toc-dark.png differ diff --git a/.openclaw/tmp/shots.mjs b/.openclaw/tmp/shots.mjs new file mode 100644 index 0000000000..4d7d42884f --- /dev/null +++ b/.openclaw/tmp/shots.mjs @@ -0,0 +1,24 @@ + +import { chromium } from 'playwright'; +const out = process.argv[2] || 'before'; +const base = 'http://127.0.0.1:4799'; +const browser = await chromium.launch(); +async function shot(name, url, vp, theme, fn) { + const ctx = await browser.newContext({ viewport: vp, deviceScaleFactor: 2, colorScheme: theme }); + const page = await ctx.newPage(); + await page.addInitScript(t => { try { localStorage.setItem('theme', t); localStorage.setItem('openclaw-docs-theme', t);} catch {} }, theme); + await page.goto(base + url, { waitUntil: 'networkidle' }); + await page.evaluate(t => document.documentElement.setAttribute('data-theme', t), theme); + if (fn) await fn(page); + await page.waitForTimeout(400); + await page.screenshot({ path: `.openclaw/tmp/${out}-${name}.png` }); + await ctx.close(); +} +for (const theme of ['dark','light']) { + await shot('desk-home-'+theme, '/', {width:1440,height:900}, theme); + await shot('desk-config-'+theme, '/gateway/configuration', {width:1440,height:900}, theme, async p => { await p.mouse.wheel(0, 1600); await p.waitForTimeout(600); }); +} +await shot('mobile-nav-dark', '/gateway/configuration', {width:390,height:844}, 'dark', async p => { await p.click('.nav-toggle'); await p.waitForTimeout(500); }); +await shot('mobile-toc-dark', '/gateway/configuration', {width:390,height:844}, 'dark', async p => { await p.mouse.wheel(0, 1600); await p.waitForTimeout(600); const s = await p.$('.toc summary'); if (s) await s.click(); await p.waitForTimeout(400); }); +await shot('mobile-nav-home-light', '/', {width:390,height:844}, 'light', async p => { await p.click('.nav-toggle'); await p.waitForTimeout(500); }); +await browser.close(); diff --git a/scripts/docs-site/docs-layout.css b/scripts/docs-site/docs-layout.css index c451ee73fe..82e365aace 100644 --- a/scripts/docs-site/docs-layout.css +++ b/scripts/docs-site/docs-layout.css @@ -34,6 +34,9 @@ --docs-muted: color-mix(in srgb, var(--ink) 67%, var(--bg)); --docs-surface: var(--paper); --docs-surface-shadow: none; + /* One quiet selection treatment for sidebar, drawer, and TOC links. */ + --docs-nav-hover-bg: color-mix(in srgb, var(--ink) 3.5%, transparent); + --docs-nav-active-bg: color-mix(in srgb, var(--ink) 6%, transparent); /* Keep rasterization native; forced grayscale can thin small text on macOS. */ -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; @@ -55,7 +58,7 @@ ) { corner-shape: superellipse(1.5); }} :root[data-theme="dark"] .docs-layout { --bg: color-mix(in srgb,#141516 60%,#000); --paper: color-mix(in srgb,#1a1c1e 74%,#000); --ink: #f0f1f2; --text: #c4c7cb; --muted: #989da4; --brand: #ef674c; --code-block: color-mix(in srgb,#181a1c 74%,#000); --code-inline: color-mix(in srgb,#272a2e 74%,#000); } -:root[data-theme="light"] .docs-layout { --bg: #fafbfc; --paper: #ffffff; --ink: #252a30; --text: #4f5964; --muted: #66717e; --brand: #ef674c; } +:root[data-theme="light"] .docs-layout { --bg: #fafbfc; --paper: #ffffff; --ink: #252a30; --text: #4f5964; --muted: #66717e; --brand: #ef674c; --docs-nav-hover-bg: color-mix(in srgb, var(--ink) 3%, transparent); --docs-nav-active-bg: color-mix(in srgb, var(--ink) 4.5%, transparent); } :root[data-theme="light"] .docs-layout { --code-block: #f2f4f6; --tok-comment: #5d6672; @@ -163,10 +166,10 @@ .docs-quick-nav h2, .docs-nav-label { margin: 0 0 12px; padding-inline: 10px; font: 400 12px/18px var(--oc-font-body); color: var(--docs-muted); } .docs-layout .docs-quick-nav .nav-link { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 0; border-radius: var(--oc-radius-control); color: var(--docs-muted); min-height: 38px; font-size: 14px; line-height: 22px; } .docs-quick-nav .icon { width: 16px; height: 16px; stroke-width: 1.5; } -.docs-layout .docs-quick-nav .nav-link.active { color: var(--brand); background: var(--docs-surface); box-shadow: var(--docs-surface-shadow); } +.docs-layout :is(.docs-quick-nav, .docs-section-pages) .nav-link.active { color: var(--ink); background: var(--docs-nav-active-bg); box-shadow: none; font-weight: 500; } +.docs-layout .docs-quick-nav .nav-link.active .icon { color: var(--brand); } .docs-nav-label { padding-block: 0; border: 0; } .docs-layout .docs-section > summary { min-height: 37px; padding: 8px 10px; border-radius: var(--oc-radius-control); font-size: 13px; } -.docs-layout .docs-section-pages .nav-link.active { color: var(--brand); background: var(--docs-surface); box-shadow: var(--docs-surface-shadow); } .docs-layout .docs-section.current > summary { background: transparent; box-shadow: none; color: var(--ink); font-weight: 500; } .docs-layout .docs-section-pages { margin: 4px 0 14px 10px; padding: 5px 0 0; border: 0; } .docs-layout .nav-nested { margin: 0; padding: 0; border: 0; } @@ -304,9 +307,9 @@ .docs-layout .toc-label { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; } .docs-layout .toc :is(h2,.toc-label) > .icon { width: 14px; height: 14px; min-width: 14px; flex: 0 0 14px; stroke-width: 1.75; } .docs-layout .toc a { color: var(--docs-muted); font-size: 13px; line-height: 1.5; } -.docs-layout .toc a.active { color: var(--ink); background: color-mix(in srgb,var(--ink) 5%,transparent); font-weight: 500; } +.docs-layout .toc a.active { color: var(--ink); background: var(--docs-nav-active-bg); font-weight: 500; } @media (hover:hover) and (pointer:fine) { - .docs-layout .toc a:not(.active):hover { color: var(--ink); background: color-mix(in srgb,var(--ink) 3%,transparent); }} + .docs-layout .toc a:not(.active):hover { color: var(--ink); background: var(--docs-nav-hover-bg); }} @media (max-width:1280px) { .docs-layout { --compact-toc-inset: var(--docs-nav); } .docs-layout .toc { isolation: isolate; background: transparent; border: 0; } @@ -513,7 +516,7 @@ .home-channel > .icon { width: 12px; height: 12px; margin-inline-start: auto; color: var(--muted); opacity: .35; } .home-channel-more > .icon { opacity: 1; } @media (hover:hover) { - .docs-layout .docs-quick-nav .nav-link:hover:not(.active) { background: var(--paper); color: var(--ink); } + .docs-layout :is(.docs-quick-nav, .docs-section-pages) .nav-link:hover:not(.active) { background: var(--docs-nav-hover-bg); color: var(--ink); } .docs-layout .doc .oc-card:hover { background: color-mix(in srgb,var(--ink) 3%,var(--docs-surface)); border-color: color-mix(in srgb,var(--ink) 20%,transparent); transform: none; } .home-channel:hover > .icon { opacity: 1; } .doc .home-channel:hover { color: var(--ink); border-color: color-mix(in srgb,var(--ink) 24%,transparent); background: var(--paper); }} @@ -721,7 +724,7 @@ .docs-section-trigger { min-height: 38px; padding-block: 8px; font-size: 14px; line-height: 22px; } .docs-section-trigger .icon { width: 12px; min-width: 12px; height: 12px; flex: 0 0 12px; margin-inline-start: auto; transform: rotate(-90deg); color: var(--muted); opacity: .42; stroke-width: 1.5; } :root[dir="rtl"] .docs-section-trigger .icon { transform: rotate(90deg); } -.docs-section-trigger[aria-current="true"] { color: var(--ink); font-weight: 600; } +.docs-section-trigger[aria-current="true"] { color: var(--ink); font-weight: 500; } .docs-sidebar-back { flex-shrink: 0; width: calc(100% - var(--docs-sidebar-inset-end)); margin-block: 16px; background: var(--docs-surface); box-shadow: var(--docs-surface-shadow); color: var(--ink); font-size: 14px; font-weight: 600; } :root[data-theme="light"] .docs-layout .docs-sidebar-back { border: 1px solid var(--docs-border); } .docs-sidebar-back svg { width: 16px; height: 16px; flex: 0 0 16px; } @@ -732,11 +735,11 @@ .docs-layout .docs-sidebar-levels .docs-section-pages .nav-section + .nav-section { margin-block-start: 28px; } .docs-layout .docs-sidebar-levels .docs-section-pages .nav-link { margin-block: 0; padding: 7px 10px; min-height: 36px; font-size: 14px; line-height: 22px; } .docs-layout .docs-sidebar-levels .docs-section-pages .nav-section > .nav-link { margin-inline: 0; } -.docs-layout .docs-sidebar-levels .docs-section-pages .nav-link.active { color: var(--brand); font-weight: 600; } .docs-layout .docs-section-pages :is(.nav-section, .nav-nested) > summary > h2 { margin: 0; padding: 0; color: inherit; font: inherit; letter-spacing: 0; text-transform: none; } .docs-section-trigger:focus-visible > .icon, .docs-layout :is(.nav-section, .nav-nested) > summary:focus-visible > .icon { opacity: .85; } @media (hover:hover) and (pointer:fine) { - .docs-section-trigger:hover, .docs-sidebar-back:hover, .docs-layout :is(.nav-section, .nav-nested) > summary:hover { color: var(--ink); background: var(--paper); } + .docs-sidebar-back:hover { color: var(--ink); background: var(--paper); } + .docs-section-trigger:hover, .docs-layout :is(.nav-section, .nav-nested) > summary:hover { color: var(--ink); background: var(--docs-nav-hover-bg); } .docs-section-trigger:hover > .icon, .docs-layout :is(.nav-section, .nav-nested) > summary:hover > .icon { opacity: .75; }} @media (prefers-reduced-motion:reduce) { .docs-sidebar-levels > * { transition: none !important; transform: none !important; }} @media (max-width:1100px) { diff --git a/scripts/docs-site/smoke.mjs b/scripts/docs-site/smoke.mjs index a3117884a2..c1be15fc4d 100644 --- a/scripts/docs-site/smoke.mjs +++ b/scripts/docs-site/smoke.mjs @@ -510,6 +510,11 @@ if (!/--oc-palette-ink-950:\s*#101012/.test(siteCss) || !/\.nav-link\.active\{border-left-color:var\(--brand\);color:var\(--brand\);font-weight:650\}/.test(siteCss)) { throw new Error("assets: dark sidebar surface is not reference-aligned"); } +if (!/\.docs-layout :is\(\.docs-quick-nav, \.docs-section-pages\) \.nav-link\.active \{ color: var\(--ink\); background: var\(--docs-nav-active-bg\); box-shadow: none; font-weight: 500; \}/.test(siteCss) + || !/\.docs-layout \.toc a\.active \{ color: var\(--ink\); background: var\(--docs-nav-active-bg\); font-weight: 500; \}/.test(siteCss) + || /\.docs-layout[^{}]*\.nav-link\.active \{[^}]*color: var\(--brand\)/.test(siteCss)) { + throw new Error("assets: sidebar, drawer, and TOC active links must share the quiet selection treatment"); +} if (!/\.site-footer\{[^}]*border-top:1px solid var\(--line\)/.test(siteCss) || !/\.site-footer-inner\{[^}]*var\(--oc-font-mono\)/.test(siteCss)) { throw new Error("assets: site footer skin is missing");