【美化】哪吒V1面板高斯模糊卡片优化代码

个人比较喜欢高斯模糊的效果，就给哪吒面板上的卡片也加上了，话不多说直接看效果。

代码奉上，喜欢的记得赏个鸡腿

高斯模糊卡片代码

<style>
/* 🌤 通用毛玻璃卡片样式：适配所有 bg-card 类 */
[class*="bg-card"] {
  background-color: rgba(255, 255, 255, 0.25) !important;
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

/* 🌙 暗色模式支持 */
.dark [class*="bg-card"] {
  background-color: rgba(30, 30, 30, 0.25) !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* 🖱 鼠标悬停时的选中效果 */
[class*="bg-card"]:hover {
  transform: scale(1.02);
  border-color: rgba(0, 200, 255, 0.6);
  box-shadow: 0 0 16px rgba(0, 200, 255, 0.4);
  cursor: pointer;
}

.dark [class*="bg-card"]:hover {
  border-color: rgba(0, 200, 255, 0.4);
  box-shadow: 0 0 16px rgba(0, 200, 255, 0.3);
}

/* 🌈 渐变边框动画（可选） */
[class*="bg-card"]::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(0,200,255,0.4), rgba(255,0,150,0.4));
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: destination-out;
  pointer-events: none;
  transition: opacity 0.3s ease;
  opacity: 0;
}

[class*="bg-card"]:hover::before {
  opacity: 1;
}
</style>

全部代码

<style>
/* 🌤 通用毛玻璃卡片样式：适配所有 bg-card 类 */
[class*="bg-card"] {
  background-color: rgba(255, 255, 255, 0.25) !important;
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

/* 🌙 暗色模式支持 */
.dark [class*="bg-card"] {
  background-color: rgba(30, 30, 30, 0.25) !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* 🖱 鼠标悬停时的选中效果 */
[class*="bg-card"]:hover {
  transform: scale(1.02);
  border-color: rgba(0, 200, 255, 0.6);
  box-shadow: 0 0 16px rgba(0, 200, 255, 0.4);
  cursor: pointer;
}

.dark [class*="bg-card"]:hover {
  border-color: rgba(0, 200, 255, 0.4);
  box-shadow: 0 0 16px rgba(0, 200, 255, 0.3);
}

/* 🌈 渐变边框动画（可选） */
[class*="bg-card"]::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(0,200,255,0.4), rgba(255,0,150,0.4));
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: destination-out;
  pointer-events: none;
  transition: opacity 0.3s ease;
  opacity: 0;
}

[class*="bg-card"]:hover::before {
  opacity: 1;
}
</style>

<!-- ✅ 基础设置与自定义属性 -->
<script>
  window.CustomLogo = "https://cdn.skyimg.de/up/2025/1/13/zera6q.webp";  // 自定义logo
  window.ShowNetTransfer = true;  // 显示上下行流量
  window.DisableAnimatedMan = true;  // 关闭动画人物插图
  window.ForceUseSvgFlag = true;  // 强制使用SVG图标
  window.CustomDesc = "放养鸡，不吃饲料，天然无危害！";  // 自定义描述
  window.CustomBackgroundImage = "https://uploads/2025/6/18/421deef3a814576ae97f80594086beb5.jpg";  // 自定义背景图
</script>

<!-- ✅ 鼠标点击特效 -->
<script src="https://testingcf.jsdelivr.net/gh/mocchen/cssmeihua/js/aixin.js"></script>
<span class="js-cursor-container"></span>
<script src="https://testingcf.jsdelivr.net/gh/mocchen/cssmeihua/js/xiaoxingxing.js"></script>

<!-- ✅ 小鸡浮出卡片右上角，插入到 body 并实时跟随 -->
<script>
  function insertCartoon() {
    const xpath = "/html/body/div/div/main/div[2]/section[1]/div[4]/div";  // 网络卡片容器
    const container = document.evaluate(xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;

    if (!container) return;

    // 移除旧图像（如果存在）
    let imgElement = document.querySelector("#nezha-cartoon");
    if (!imgElement) {
      imgElement = document.createElement("img");
      imgElement.id = "nezha-cartoon";
      imgElement.src = "https://free.picui.cn/free/2025/04/15/67fe011873e90.gif";
      imgElement.style.position = "fixed";
      imgElement.style.width = "50px";
      imgElement.style.zIndex = "99999";
      imgElement.style.pointerEvents = "none";
      document.body.appendChild(imgElement);
    }

    // 获取卡片位置并更新小鸡位置
    const rect = container.getBoundingClientRect();
    imgElement.style.left = `${rect.right - 50}px`;  // 卡片右边减去图像宽度
    imgElement.style.top = `${rect.top - 30}px`;     // 卡片顶部上方浮出
  }

  // 初次插入
  window.addEventListener("DOMContentLoaded", insertCartoon);

  // 定时更新位置（每 500ms 跟踪卡片位置）
  setInterval(insertCartoon, 500);
</script>

<!-- ✅ 流量监控进度条���色功能 -->
<script>
  function updateTrafficProgressColors() {
    const allProgressBars = document.querySelectorAll('.bg-emerald-500');
    allProgressBars.forEach((bar) => {
      let percentage = 0;
      let parent = bar;
      for (let i = 0; i < 10; i++) {
        if (parent.classList.contains('w-full')) break;
        parent = parent.parentElement;
        if (!parent) break;
      }

      if (parent) {
        const percentEl = parent.querySelector('.text-xs.font-medium.text-neutral-600');
        if (percentEl) {
          const match = percentEl.textContent.match(/(\d+(?:\.\d+)?)%/);
          if (match) percentage = parseFloat(match[1]);
        }

        if (percentage >= 100) {
          bar.style.background = 'linear-gradient(90deg, #6b7280 0%, #4b5563 100%)';
        } else if (percentage >= 90) {
          bar.style.background = 'linear-gradient(90deg, #ef4444 0%, #dc2626 100%)';
        } else if (percentage >= 70) {
          bar.style.background = 'linear-gradient(90deg, #fbbf24 0%, #f59e0b 100%)';
        } else {
          bar.style.background = 'linear-gradient(90deg, #10b981 0%, #059669 100%)';
        }
      }
    });
  }

  function initTrafficProgressColors() {
    const style = document.createElement('style');
    style.textContent = `
      .traffic-progress-warning {
        background: linear-gradient(90deg, #fbbf24 0%, #f59e0b 100%) !important;
      }
      .traffic-progress-danger {
        background: linear-gradient(90deg, #ef4444 0%, #dc2626 100%) !important;
      }
      .traffic-progress-critical {
        background: linear-gradient(90deg, #6b7280 0%, #4b5563 100%) !important;
      }
      .traffic-progress-normal {
        background: linear-gradient(90deg, #10b981 0%, #059669 100%) !important;
      }
    `;
    document.head.appendChild(style);

    setTimeout(updateTrafficProgressColors, 1000);
    setTimeout(updateTrafficProgressColors, 3000);
  }

  document.addEventListener('DOMContentLoaded', initTrafficProgressColors);
  if (document.readyState !== 'loading') initTrafficProgressColors();
</script>

<!-- ✅ 自动点击按钮并显示隐藏卡片 -->
<script>
  const selectorButton = '#root > div > main > div.mx-auto.w-full.max-w-5xl.px-0.flex.flex-col.gap-4.server-info > section > div.flex.justify-center.w-full.max-w-\\[200px\\] > div > div > div.relative.cursor-pointer.rounded-3xl.px-2\\.5.py-\\[8px\\].text-\\[13px\\].font-\\[600\\].transition-all.duration-500.text-stone-400.dark\\:text-stone-500';
  const selectorSection = '#root > div > main > div.mx-auto.w-full.max-w-5xl.px-0.flex.flex-col.gap-4.server-info > section';
  const selector3 = '#root > div > main > div.mx-auto.w-full.max-w-5xl.px-0.flex.flex-col.gap-4.server-info > div:nth-child(3)';
  const selector4 = '#root > div > main > div.mx-auto.w-full.max-w-5xl.px-0.flex.flex-col.gap-4.server-info > div:nth-child(4)';

  let hasClicked = false;
  let divVisible = false;

  function forceBothVisible() {
    const div3 = document.querySelector(selector3);
    const div4 = document.querySelector(selector4);
    if (div3 && div4) {
      div3.style.display = 'block';
      div4.style.display = 'block';
    }
  }

  function hideSection() {
    const section = document.querySelector(selectorSection);
    if (section) section.style.display = 'none';
  }

  function tryClickButton() {
    const btn = document.querySelector(selectorButton);
    if (btn && !hasClicked) {
      btn.click();
      hasClicked = true;
      setTimeout(forceBothVisible, 500);
    }
  }

  const observer = new MutationObserver(() => {
    const div3 = document.querySelector(selector3);
    const div4 = document.querySelector(selector4);
    const isDiv3Visible = div3 && getComputedStyle(div3).display !== 'none';
    const isDiv4Visible = div4 && getComputedStyle(div4).display !== 'none';
    const isAnyDivVisible = isDiv3Visible || isDiv4Visible;

    if (isAnyDivVisible && !divVisible) {
      hideSection();
      tryClickButton();
    } else if (!isAnyDivVisible && divVisible) {
      hasClicked = false;
    }

    divVisible = isAnyDivVisible;

    if (div3 && div4) {
      if (!isDiv3Visible || !isDiv4Visible) {
        forceBothVisible();
      }
    }

    document.querySelectorAll('h3.font-semibold.tracking-tight').forEach(el => {
      if (el.textContent.trim() !== '') el.style.display = 'none';
    });

    updateTrafficProgressColors();
  });

  const root = document.querySelector('#root');
  if (root) {
    observer.observe(root, {
      childList: true,
      attributes: true,
      subtree: true,
      attributeFilter: ['style', 'class']
    });
  }
</script>

<!-- ✅ 周期性流量进度条刷新功能 -->
<script>
  window.TrafficScriptConfig = {
    showTrafficStats: true,
    insertAfter: true,
    interval: 60000,
    toggleInterval: 5000,
    duration: 500,
    enableLog: false
  };

  window.addEventListener('DOMContentLoaded', () => {
    const script = document.createElement('script');
    script.src = "https://cdn.jsdelivr.net/gh/ziwiwiz/nezha-ui@main/traffic-progress.js";
    document.body.appendChild(script);
  });
</script>