dsh-deepseek-style-theme 2.0.86 → 2.0.87

package/lib/client.js

@@ -1109,15 +1109,27 @@ html,body{background-color:transparent!important}
    The invisible-text hazard stays open on purpose. A stuck appearance switch is
    a broken control; near-white text on a near-white page at least still reads
    once the marker agrees. Do not re-add these two rules. */
-body:not([data-dshome-bg=custom]){background:radial-gradient(1200px 700px at 12% -10%,color-mix(in srgb,var(--ds-brand) 14%,transparent),transparent 60%),radial-gradient(1000px 600px at 105% 12%,color-mix(in srgb,var(--ds-brand-light) 16%,transparent),transparent 55%),radial-gradient(900px 700px at 50% 115%,color-mix(in srgb,var(--ds-brand) 10%,transparent),transparent 60%),linear-gradient(180deg,#fbfbfd 0%,#f5f6fa 100%);background-attachment:fixed}
+/* The themed background lives on a FIXED PSEUDO-ELEMENT, not on the body with
+   background-attachment: fixed. Two reasons, and the second is the one the user hit:
+   a fixed-attachment background is painted in its own phase, so Chromium's
+   backdrop-filter does not sample it -- every glass pane over the page wash ended up
+   blurring "nothing" and read as plain translucency ("现在的效果是半透明，没有背景模糊
+   效果"). A position:fixed layer is ordinary painted content and is part of the
+   backdrop. The visual is the same (the wash stays put), and z-index:-2 keeps it under
+   the fluid canvas (-1), which is what the glass should blur next. No backticks in this
+   comment: it lives inside a template literal and a pair of them ends it. */
+body:not([data-dshome-bg=custom])::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(1200px 700px at 12% -10%,color-mix(in srgb,var(--ds-brand) 14%,transparent),transparent 60%),radial-gradient(1000px 600px at 105% 12%,color-mix(in srgb,var(--ds-brand-light) 16%,transparent),transparent 55%),radial-gradient(900px 700px at 50% 115%,color-mix(in srgb,var(--ds-brand) 10%,transparent),transparent 60%),linear-gradient(180deg,#fbfbfd 0%,#f5f6fa 100%)}
 body[data-dshome-color=red]{--ds-brand:#F5222D;--ds-brand-deep:#CF1322;--ds-brand-mid:#FF4D4F;--ds-brand-light:#FF7875}
 body[data-dshome-color=blue]{--ds-brand:#4D6BFE;--ds-brand-deep:#3A65C2;--ds-brand-mid:#4176E6;--ds-brand-light:#73A3D2}
 body[data-dshome-dark]{--ds-brand:#10B981;--ds-brand-deep:#059669;--ds-brand-mid:#34D399;--ds-brand-light:#6EE7B7}
-body[data-dshome-dark]:not([data-dshome-bg=custom]){background:radial-gradient(1100px 650px at 8% -8%,#0a3a28 0,transparent 62%),radial-gradient(950px 600px at 104% 10%,#0d4d35 0,transparent 58%),radial-gradient(800px 600px at 50% 118%,#06291c 0,transparent 60%),linear-gradient(180deg,#081b14 0%,#0a241a 55%,#081b14 100%);background-attachment:fixed}
+body[data-dshome-dark]:not([data-dshome-bg=custom])::before{background:radial-gradient(1100px 650px at 8% -8%,#0a3a28 0,transparent 62%),radial-gradient(950px 600px at 104% 10%,#0d4d35 0,transparent 58%),radial-gradient(800px 600px at 50% 118%,#06291c 0,transparent 60%),linear-gradient(180deg,#081b14 0%,#0a241a 55%,#081b14 100%)}
 body[data-dshome-dark][data-dshome-color=red]{--ds-brand:#FF4D4F;--ds-brand-deep:#F5222D;--ds-brand-mid:#FF7875;--ds-brand-light:#FFA39E}
-body[data-dshome-dark][data-dshome-color=red]:not([data-dshome-bg=custom]){background:radial-gradient(1100px 650px at 8% -8%,#5c0f14 0,transparent 62%),radial-gradient(950px 600px at 104% 10%,#7d1a20 0,transparent 58%),radial-gradient(800px 600px at 50% 118%,#3f0a0e 0,transparent 60%),linear-gradient(180deg,#260709 0%,#330a0d 55%,#260709 100%);background-attachment:fixed}
+body[data-dshome-dark][data-dshome-color=red]:not([data-dshome-bg=custom])::before{background:radial-gradient(1100px 650px at 8% -8%,#5c0f14 0,transparent 62%),radial-gradient(950px 600px at 104% 10%,#7d1a20 0,transparent 58%),radial-gradient(800px 600px at 50% 118%,#3f0a0e 0,transparent 60%),linear-gradient(180deg,#260709 0%,#330a0d 55%,#260709 100%)}
 body[data-dshome-dark][data-dshome-color=blue]{--ds-brand:#5D79FF;--ds-brand-deep:#4D6BFE;--ds-brand-mid:#7A96FF;--ds-brand-light:#9DB9FF}
-body[data-dshome-dark][data-dshome-color=blue]:not([data-dshome-bg=custom]){background:radial-gradient(1100px 650px at 8% -8%,#1a3870 0,transparent 62%),radial-gradient(950px 600px at 104% 10%,#2d5f9e 0,transparent 58%),radial-gradient(800px 600px at 50% 118%,#0d1f4a 0,transparent 60%),linear-gradient(180deg,#0a1a3a 0%,#0d1f4a 55%,#0a1a3a 100%);background-attachment:fixed}
+body[data-dshome-dark][data-dshome-color=blue]:not([data-dshome-bg=custom])::before{background:radial-gradient(1100px 650px at 8% -8%,#1a3870 0,transparent 62%),radial-gradient(950px 600px at 104% 10%,#2d5f9e 0,transparent 58%),radial-gradient(800px 600px at 50% 118%,#0d1f4a 0,transparent 60%),linear-gradient(180deg,#0a1a3a 0%,#0d1f4a 55%,#0a1a3a 100%)}
+/* The body itself must NOT paint a background: any opaque page background sits
+   below the pseudo-element and would be what the glass samples. */
+body:not([data-dshome-bg=custom]){background:none!important}
 /* ── background recipe: 自选背景 ─────────────────────────────────────────
    The custom value never enters this sheet. It arrives as the custom property
    --dshome-custom-bg on <body>, and only after the client's CSS.supports()
@@ -1493,6 +1505,19 @@ body[data-dshome-dark] :is([class*="_headline"]){background:linear-gradient(120d
 			{ anchor: ".wSkVaW_scrollBody", css: `
 :is(${USER_BUBBLE}){background:rgba(255,255,255,.6)!important;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid rgba(0,0,0,.05);box-shadow:0 4px 16px rgba(13,30,60,.06)}
 body[data-dshome-dark] :is(${USER_BUBBLE}){background:rgba(21,42,86,.65)!important;border:1px solid rgba(255,255,255,.1);box-shadow:0 4px 16px rgba(0,0,0,.25)}
+` },
+			// The line under the composer (round/step/token stats, `[data-dsh-stats]` is
+			// product markup that has never been renamed) gets the LENS touch the user
+			// asked for: "模糊效果，你对对话窗下方文字进行放大（模拟液体放大）". A real lens
+			// magnifies what is behind the glass, which a backdrop filter cannot do --
+			// but the pane is directly above this line, so scaling it a touch reads as
+			// the pane's magnification, and scaling it further while the pane leans
+			// (html[data-dshome-leaning], written by startComposerTilt) ties the motion
+			// to the hover. Small on purpose: 6% is a lens hint, 12% while leaning.
+			{ anchor: "[data-dsh-stats]", css: `
+[data-dsh-stats]{transform:scale(1.06);transform-origin:center center;transition:transform .24s cubic-bezier(.2,.8,.2,1)}
+html[data-dshome-leaning] [data-dsh-stats]{transform:scale(1.12)}
+@media (prefers-reduced-motion:reduce){[data-dsh-stats]{transition:none}}
 ` },
 			// Trajectory view bar.
 			{ anchor: ".fV0t5q_root", css: `
@@ -1790,10 +1815,14 @@ html[data-dshome-glass="liquid"] :is(${USER_BUBBLE}){
 /* The composer leans under the cursor (see startComposerTilt). The transition
    is what turns the release into a settle rather than a snap: the ported
    routine writes the neutral transform back and only drops the inline
-   properties 240ms later. */
+   properties 240ms later.
+   will-change: transform used to sit here as a perf hint and is deliberately
+   GONE: promoting the pane to its own layer is the other half of "no blur" --
+   Chromium's backdrop sampling is unreliable on a will-changed element, and the
+   compositor already promotes a transformed element while it is actually being
+   transformed. The hint cost the effect it was meant to smooth. */
 html[data-dshome-glass="liquid"] [data-composer-card]{
   transition:transform .24s cubic-bezier(.2,.8,.2,1),background-color .18s ease,box-shadow .18s ease!important;
-  will-change:transform;
 }
 html[data-dshome-glass="liquid"] :is(${USER_BUBBLE}):hover{
   background-color:rgb(255 255 255 / .18)!important;
@@ -1859,8 +1888,11 @@ html[data-dshome-dispersion][data-dshome-glass="liquid"][data-dshome-composer="o
    actually behind it, so the fade shows up as a lighter band above 设置 (the
    user's red box). The pane itself already separates the list from the
    conversation, so the fade is dropped. Scoped to the sidebar and to the
-   product's own <hash>_fade naming so nothing else is touched. */
-html[data-dshome-glass="liquid"] body .hHd-Xa_root [class*="_fade" i]{
+   product's own <hash>_fade naming so nothing else is touched.
+   NOT gated on the liquid recipe: it was, and the user sent a screenshot of the
+   same light band in 白磨砂 ("白磨砂，有这个渐变") — the frosted pane is translucent
+   too, so its end stop mismatches just the same. Both recipes drop it. */
+body .hHd-Xa_root [class*="_fade" i]{
   background-image:none!important;
 }
 /* The sidebar's own, heavier blur. Written after the two rules above because it
@@ -2421,6 +2453,9 @@ html[data-dshome-blur="off"] body{
 		//     `spots` (0 means the composer no longer matches TILT_SELECTOR), and the
 		//     reduced-motion case logs one info line instead of vanishing.
 		const TILT_SELECTOR = '[data-composer-card],.uV2eYG_card';
+		/** On <html> while the composer leans; the lens touch on the line under the
+		* composer reads it (see the [data-dsh-stats] patch block). */
+		const LEAN_ATTR = 'data-dshome-leaning';
 		// 0.0175 rad was upstream's conservative lean, and after 2.0.85 finally made
 		// the effect reachable the verdict was "倾斜效果很微弱" -- fair, at ~4 degrees
 		// end to end over a pane this wide it reads as a wobble, not as depth. Raised
@@ -2493,6 +2528,7 @@ html[data-dshome-blur="off"] body{
 				if (!tilted.has(spot)) return;
 				releasedAt = performance.now();
 				tilted.delete(spot);
+				document.documentElement.removeAttribute(LEAN_ATTR);
 				spot.style.transform = 'perspective(' + TILT_PERSPECTIVE + 'px) rotateX(0rad) rotateY(0rad) scale(1)';
 				const handle = window.setTimeout(() => {
 					settle.delete(spot);
@@ -2519,6 +2555,11 @@ html[data-dshome-blur="off"] body{
 						+ ' scale(' + TILT_SCALE + ')';
 					if (!tilted.has(spot)) engagements += 1;
 					tilted.add(spot);
+					// The marker the lens touch reads (see the composer-stats block in
+					// PATCH_BLOCKS): while the pane leans, the line under it is scaled a
+					// little further, which is the closest thing to a lens without
+					// touching the backdrop.
+					if (!document.documentElement.hasAttribute(LEAN_ATTR)) document.documentElement.setAttribute(LEAN_ATTR, '');
 				});
 			};
 			/**
@@ -2633,6 +2674,7 @@ html[data-dshome-blur="off"] body{
 					spot.style.removeProperty('transform-origin');
 					spot.style.removeProperty('transition');
 				}
+				document.documentElement.removeAttribute(LEAN_ATTR);
 				current = null;
 			};
 		}
@@ -2651,7 +2693,7 @@ html[data-dshome-blur="off"] body{
 			if (!supportsWebgl2()) return startParticles();
 			// Which build is running, readable from the page (see README). One line in
 			// the console answers "is the bundle I just installed actually live?".
-			try { window.__dshomeBuild = '2.0.86 glass-on noise-fix'; } catch (error) {}
+			try { window.__dshomeBuild = '2.0.87 lens-blur'; } catch (error) {}
 			const canvas = document.createElement('canvas');
 			canvas.setAttribute('data-dsh-deepseek-canvas', '');
 			const style = canvas.style;
@@ -2782,6 +2824,33 @@ html[data-dshome-blur="off"] body{
 					recipe: dsttGetGlass()
 				});
 			} catch (error) {}
+			/**
+			* "Why is there no blur" answered in one call: the computed backdrop chain of
+			* every glass surface, the two things that can silently stop Chromium from
+			* sampling a backdrop (a fixed-attachment body background and a will-changed
+			* pane), and the setting that turns the radii off on purpose.
+			*/
+			try {
+				window.__dshomeGlassProbe = () => {
+					const card = document.querySelector(TILT_SELECTOR);
+					const chain = (selector, pseudo) => {
+						const node = document.querySelector(selector);
+						if (node === null) return null;
+						try { return getComputedStyle(node, pseudo === undefined ? null : pseudo).backdropFilter; } catch (error) { return 'ERR'; }
+					};
+					return {
+						recipe: dsttGetGlass(),
+						backdropBlurSetting: dsttState.blur,
+						bodyBackgroundAttachment: getComputedStyle(document.body).backgroundAttachment,
+						bodyBackgroundImage: getComputedStyle(document.body).backgroundImage.slice(0, 32),
+						washLayer: getComputedStyle(document.body, '::before').position,
+						tiltCard: card === null ? null : getComputedStyle(card).backdropFilter,
+						tiltCardWillChange: card === null ? null : (getComputedStyle(card).willChange || 'auto'),
+						sidebar: chain('.hHd-Xa_root', '::before'),
+						bubble: chain(USER_BUBBLE)
+					};
+				};
+			} catch (error) {}
 			// Both recipes share one filter pair, so the recipe selects the scale:
 			// 104 for liquid (visible edge refraction) and the untouched 60 for
 			// frosted, which is what the pane has always used.
@@ -2815,7 +2884,7 @@ html[data-dshome-blur="off"] body{
 		}
 
 		function startParticles() {
-			try { window.__dshomeBuild = '2.0.86 glass-on noise-fix'; } catch (error) {}
+			try { window.__dshomeBuild = '2.0.87 lens-blur'; } catch (error) {}
 			const canvas = document.createElement('canvas');
 			canvas.setAttribute('data-dsh-deepseek-canvas', '');
 			const style = canvas.style;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "dsh-deepseek-style-theme",
   "description": "DeepSeek official-home style theme: WebGL fluid-flow background, liquid glass with SVG edge refraction, glass sidebar and composer, frosted header, running-subagent progress panel, and DeepSeek brand link for the dsh web GUI",
-  "version": "2.0.86",
+  "version": "2.0.87",
   "type": "module",
   "keywords": [
     "deepseek",