From a9b194f3bfdde870d7a404e85939c691cbba1c32 Mon Sep 17 00:00:00 2001
From: xfy <i@rua.plus>
Date: Wed, 24 Jun 2026 15:46:24 +0800
Subject: [PATCH] =?UTF-8?q?fix(card):=20=E5=B0=86=20blur-img=20=E8=A7=84?=
 =?UTF-8?q?=E5=88=99=E7=A7=BB=E5=85=A5=20@layer=20components=20=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D=E5=B0=81=E9=9D=A2=E9=AB=98=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

上一次仅提升选择器特异性(.blur-img.post-card-cover-blur)未能生效，
根因是 CSS @layer 级联:未分层(layer 外)规则无条件覆盖分层(layer 内)
规则,与特异性无关。

.blur-img 全局规则原本在 @layer components 之外(line 644),
而卡片规则在 layer 内(line 532),导致卡片 aspect-ratio:4/3 败给
全局 var(--ar),--ar 未定义时高度場陷为 0。

将整个 blur-up 规则块(.blur-img/.blur-img-placeholder/.blur-img-full
及其 is-loaded/.dark 变体)移入 @layer components,使两条 .blur-img*
规则同层竞争,特异性 (0,2,0) > (0,1,0) 才真正生效。
---
 input.css | 115 ++++++++++++++++++++++++++++--------------------------
 1 file changed, 60 insertions(+), 55 deletions(-)

diff --git a/input.css b/input.css
index d85126e..73a1ece 100644
--- a/input.css
+++ b/input.css
@@ -568,6 +568,65 @@
   .post-card-accent:hover::after {
     width: 100%;
   }
+
+  /* ========== Blur-up 渐进图片加载 ==========
+     放在 @layer components 内，与 .blur-img.post-card-cover-blur 同层，
+     这样特异性能正常生效（layer 外规则会无条件覆盖 layer 内规则，
+     导致卡片的 aspect-ratio:4/3 败给全局 var(--ar)）。 */
+  .blur-img {
+    position: relative;
+    display: block;
+    overflow: hidden;
+    aspect-ratio: var(--ar);
+    /* 加载中灰底（占位图未加载完时） */
+    background: var(--color-paper-code-bg, #f5f5f5);
+    border-radius: 6px;
+    margin: 1em 0;
+  }
+  .blur-img-placeholder {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    /* 重置 .md-content img 的 margin/max-width/height，避免把 absolute 图层推偏 */
+    margin: 0;
+    max-width: none;
+    /* 20px 占位图放大后模糊，scale 遮边缘 */
+    filter: blur(20px) saturate(1.2);
+    transform: scale(1.1);
+    transition: opacity 0.4s ease;
+  }
+  .blur-img-full {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    /* 重置 .md-content img 的 margin/max-width/height，避免把 absolute 图层推偏 */
+    margin: 0;
+    max-width: none;
+    opacity: 0;
+    z-index: 1;
+  }
+  /* full 加载完成后由 JS 直接设 opacity:1（不依赖 CSS transition，
+     避免合成层重绘时机导致 opacity 卡在 0）。 */
+  .blur-img-full.is-loaded,
+  .blur-img.is-loaded .blur-img-full {
+    opacity: 1;
+  }
+  /* 容器标记 loaded 后：显式隐藏占位图 + 去掉灰底，避免重绘时机导致残留/灰边 */
+  .blur-img.is-loaded .blur-img-placeholder {
+    opacity: 0;
+  }
+  .blur-img.is-loaded {
+    background: transparent;
+  }
+
+  /* 暗色模式灰底 */
+  .dark .blur-img {
+    background: var(--color-paper-code-bg, #2a2a2a);
+  }
 }
 
 @keyframes fadeIn {
@@ -640,58 +699,4 @@
   }
 }
 
-/* ========== Blur-up 渐进图片加载 ========== */
-.blur-img {
-  position: relative;
-  display: block;
-  overflow: hidden;
-  aspect-ratio: var(--ar);
-  /* 加载中灰底（占位图未加载完时） */
-  background: var(--color-paper-code-bg, #f5f5f5);
-  border-radius: 6px;
-  margin: 1em 0;
-}
-.blur-img-placeholder {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  /* 重置 .md-content img 的 margin/max-width/height，避免把 absolute 图层推偏 */
-  margin: 0;
-  max-width: none;
-  /* 20px 占位图放大后模糊，scale 遮边缘 */
-  filter: blur(20px) saturate(1.2);
-  transform: scale(1.1);
-  transition: opacity 0.4s ease;
-}
-.blur-img-full {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  /* 重置 .md-content img 的 margin/max-width/height，避免把 absolute 图层推偏 */
-  margin: 0;
-  max-width: none;
-  opacity: 0;
-  z-index: 1;
-}
-/* full 加载完成后由 JS 直接设 opacity:1（不依赖 CSS transition，
-   避免合成层重绘时机导致 opacity 卡在 0）。 */
-.blur-img-full.is-loaded,
-.blur-img.is-loaded .blur-img-full {
-  opacity: 1;
-}
-/* 容器标记 loaded 后：显式隐藏占位图 + 去掉灰底，避免重绘时机导致残留/灰边 */
-.blur-img.is-loaded .blur-img-placeholder {
-  opacity: 0;
-}
-.blur-img.is-loaded {
-  background: transparent;
-}
-
-/* 暗色模式灰底 */
-.dark .blur-img {
-  background: var(--color-paper-code-bg, #2a2a2a);
-}
+/* ========== Blur-up 渐进图片加载（已移入 @layer components） ========== */