dsh-deepseek-style-theme 2.0.86 → 2.0.88

package/THIRD-PARTY-NOTICES.md

@@ -6,9 +6,7 @@ must be preserved in every redistribution.
 
 ---
 
-## dsh-theme-mineradio — code included
-
-`lib/client.js` contains a port of the fluid-shader subsystem and the glass
+## dsh-theme-mineradio — code included`lib/client.js` contains a port of the fluid-shader subsystem and the glass
 dispersion / specular-parallax subsystem of **dsh-theme-mineradio v2.3.8**:
 
 - the three GLSL programs (`VERTEX_SHADER`, `FLOW_SHADER`, `DISPLAY_SHADER`) and
@@ -20,6 +18,16 @@ dispersion / specular-parallax subsystem of **dsh-theme-mineradio v2.3.8**:
   `supportsSvgBackdropFilter`),
 - the specular cursor parallax (`startSpecularParallax`).
 
+One further technique is **re-expressed, not copied** (v2.0.88): the docked bottom bar,
+in which the composer and its stats line become a single glass slab with the backdrop
+blur on the wrapper's `::before`, the inner surfaces transparent, and one hairline at
+the seam. That structure comes from mineradio's "fused" state
+(`[data-dsh-inputbar]:has([data-dsh-stats])`), including two of its recorded lessons:
+`z-index` rather than `isolation` on the wrapper (isolation is also a backdrop root and
+would clip popup frost to the bar) and `backdrop-filter: none` on the inner surfaces so
+their blur cannot double up with the slab's. The declarations here are written against
+this plugin's own tokens (`--dshome-*`), not mineradio's `--dsh-aqua-*`.
+
 Only naming and external dependencies were adapted: plugin-scoped identifiers
 were renamed to this plugin's `dshome-` prefix, and the upstream settings/theme
 store and React layer were replaced by function parameters. **The GLSL shader

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,47 @@ 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]) and
+			// the whole input bar ([data-dsh-inputbar]) -- both product markup that has
+			// never been renamed.
+			//
+			// Two things happen here.
+			//
+			// 1. The DOCKED BOTTOM BAR, borrowed from dsh-theme-mineradio's fused state
+			//    (MIT, @dhicoc): once the stats line exists, the WHOLE input bar becomes
+			//    one glass slab -- a single border, radius, fill and shadow on the
+			//    wrapper, with the backdrop blur on its ::before -- and the card and the
+			//    stats turn transparent inside it, leaving one hairline at the seam. The
+			//    two surfaces can then never drift apart tonally, and the composer reads
+			//    as one designed bar instead of a card with loose text under it.
+			//    `:has()` is what makes this safe to attempt at all: when the product
+			//    does not render a stats line, none of it applies and the card keeps its
+			//    own glass.
+			//    Two details are load-bearing and inherited from mineradio's notes:
+			//    z-index (not isolation) on the wrapper -- isolation is also a backdrop
+			//    root and would clip popup frost to the bar -- and `backdrop-filter:
+			//    none` on the inner surfaces, whose own blur would otherwise double up
+			//    with the slab's.
+			//
+			// 2. The LENS touch the user asked for ("对对话窗下方文字进行放大（模拟液体放大）"):
+			//    a real lens magnifies what is behind the glass, which a backdrop filter
+			//    cannot do, so the text is scaled a touch instead -- and a touch further
+			//    while the pane leans (html[data-dshome-leaning], written by
+			//    startComposerTilt). `transform-origin: left center` keeps a
+			//    left-aligned line growing inwards instead of spilling past the slab's
+			//    right edge.
+			{ anchor: "[data-dsh-stats]", css: `
+[data-dsh-inputbar]:has([data-dsh-stats]){position:relative;z-index:8;padding:0;border:1.5px solid rgba(255,255,255,.55);border-radius:24px;background:rgba(255,255,255,.42);box-shadow:0 8px 32px rgba(13,30,60,.1),inset 0 1px 1px hsla(0,0%,100%,.8)}
+[data-dsh-inputbar]:has([data-dsh-stats])::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;-webkit-backdrop-filter:blur(28px) saturate(1.42) brightness(1.02);backdrop-filter:blur(28px) saturate(1.42) brightness(1.02)}
+[data-dsh-inputbar]:has([data-dsh-stats]) [data-composer-card]{border:none!important;border-radius:0!important;background:transparent!important;background-image:none!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
+[data-dsh-inputbar]:has([data-dsh-stats]) [data-composer-card]::before,[data-dsh-inputbar]:has([data-dsh-stats]) [data-composer-card]::after{display:none!important}
+[data-dsh-inputbar]:has([data-dsh-stats]) [data-dsh-stats]{display:block;width:100%;max-width:none;box-sizing:border-box;margin:auto 0 0;min-height:24px;padding:2px 16px;border:none;border-top:1px solid rgba(0,0,0,.06);border-radius:0;background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;transform-origin:left center;transition:transform .24s cubic-bezier(.2,.8,.2,1)}
+[data-dsh-stats]{transform:scale(1.04)}
+html[data-dshome-leaning] [data-dsh-inputbar]:has([data-dsh-stats]) [data-dsh-stats]{transform:scale(1.08)}
+body[data-dshome-dark] [data-dsh-inputbar]:has([data-dsh-stats]){border-color:rgba(255,255,255,.16);background:rgba(13,30,60,.55);box-shadow:0 10px 40px rgba(0,0,0,.35),inset 0 1px 1px rgba(255,255,255,.06)}
+body[data-dshome-dark] [data-dsh-inputbar]:has([data-dsh-stats]) [data-dsh-stats]{border-top-color:rgba(255,255,255,.1)}
+@media (prefers-reduced-motion:reduce){[data-dsh-inputbar]:has([data-dsh-stats]) [data-dsh-stats]{transition:none}}
 ` },
 			// Trajectory view bar.
 			{ anchor: ".fV0t5q_root", css: `
@@ -1790,10 +1843,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 +1916,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 +2481,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 +2556,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 +2583,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 +2702,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 +2721,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.88 fused-bar'; } catch (error) {}
 			const canvas = document.createElement('canvas');
 			canvas.setAttribute('data-dsh-deepseek-canvas', '');
 			const style = canvas.style;
@@ -2782,6 +2852,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 +2912,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.88 fused-bar'; } 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.88",
   "type": "module",
   "keywords": [
     "deepseek",