ai搞了个骚骚的论坛主题

环境：

插件：stylus

感兴趣的可以试试

首页置顶边框有点小问题

源码：/* ==========================================================================

NodeSeek 二次元毛玻璃主题 v3 —— for Stylus

适用地址: nodeseek.com / www.nodeseek.com

本版修复：① 背景换成真正的二次元人物插画随机图 API

② 左侧图标导航栏也补上玻璃效果（v2 漏掉了）

③ 所有卡片改成"渐变描边 + 毛玻璃填充"双层背景写法

========================================================================== */

/* ---------- 1. 背景：二次元人物插画随机图 API ---------- /

/ 主 API：t.mwm.moe，返回的是二次元人物插画壁纸（不是风景/风光图）。

如果它偶尔挂了，把下面 url() 换成注释里任意一个备用 API 即可，都是同类"二次元角色壁纸"接口：

备用1： https://www.loliapi.com/acg/pc/

备用2： https://api.paugram.com/wallpaper/anime

备用3： https://api.ixiaowai.cn/api/api.php

想固定用自己下载的某一张图，就把 url(...) 换成图片的直链地址（要以 .jpg/.png 结尾）。 */

html {

min-height: 100vh !important;

background:

linear-gradient(160deg, rgba(255, 214, 236, 0.22) 0%, rgba(196, 209, 255, 0.2) 45%, rgba(255, 244, 214, 0.18) 100%),

url('https://t.mwm.moe/pc') center center / cover no-repeat fixed !important;

background-color: #f3e9f7 !important;

}

body {

background: transparent !important;

font-family: "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei",

-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;

color: #3a2e42 !important;

}

/* 柔光装饰，纯 CSS，不依赖图片，永远不会挂 */

body::before {

content: "" !important;

position: fixed !important;

inset: 0 !important;

z-index: 0 !important;

pointer-events: none !important;

background:

radial-gradient(circle at 15% 20%, rgba(255, 182, 224, 0.25), transparent 40%),

radial-gradient(circle at 85% 15%, rgba(173, 196, 255, 0.25), transparent 40%),

radial-gradient(circle at 50% 90%, rgba(255, 240, 179, 0.2), transparent 45%);

}

/* ---------- 2. 渐变描边 + 毛玻璃填充：通用写法 ----------

原理：background 用两层——内层纯色/半透明做玻璃底色（padding-box），

外层渐变色做描边（border-box），配合 border: solid transparent 实现

"圆角渐变边框 + 内部毛玻璃"的效果，且不会互相覆盖。 */

/* ---------- 3. 顶部导航栏 ---------- /

header,

nav,

.header,

div[class="Header"],

div[class*="navbar"] {

background: rgba(255, 255, 255, 0.78) !important;

backdrop-filter: blur(14px) saturate(160%) !important;

-webkit-backdrop-filter: blur(14px) saturate(160%) !important;

border: none !important;

box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;

}

/* ---------- 4. 主内容区（帖子列表所在的中间大容器） ---------- /

main,

.main,

#main,

div[class="page-content"],

div[class*="PageContent"] {

background:

linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.55)) padding-box,

linear-gradient(135deg, #ffb6d5, #b3c4ff, #ffe3a3) border-box !important;

border: 2px solid transparent !important;

backdrop-filter: blur(18px) saturate(160%) !important;

-webkit-backdrop-filter: blur(18px) saturate(160%) !important;

border-radius: 20px !important;

box-shadow: 0 10px 40px rgba(150, 120, 180, 0.18) !important;

position: relative !important;

z-index: 1 !important;

padding: 12px !important;

}

/* 内部所有嵌套容器强制去背景/去模糊，避免二次叠加导致文字发糊 */

main *,

.main *,

#main * {

backdrop-filter: none !important;

-webkit-backdrop-filter: none !important;

}

/* ---------- 5. 帖子列表卡片：渐变描边 + 玻璃底 ---------- */

/* 先清掉站点自带的默认边框/分割线（置顶公告等特殊行经常带一条残留的

下边框，跟我们后面加的渐变描边混在一起，看起来"边框显示不全"），

之后再统一套用渐变描边，保证每一行边框完整、样式一致。 */

main li,

main article,

.main li,

.main article,

#main li,

#main article {

border: none !important;

box-shadow: none !important;

box-sizing: border-box !important;

}

ul.discussion-list > li,

.post-list-item,

.discussion-item,

div[class*="post-item"],

div[class*="PostItem"],

div[class*="discussion-item"] {

background:

linear-gradient(rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.78)) padding-box,

linear-gradient(120deg, #ffb6d5, #c8b6ff, #b3d4ff) border-box !important;

border: 2px solid transparent !important;

border-radius: 14px !important;

margin-bottom: 10px !important;

padding: 10px 14px !important;

box-shadow: 0 2px 10px rgba(180, 150, 200, 0.12) !important;

box-sizing: border-box !important;

overflow: visible !important;

transition: transform 0.22s ease, box-shadow 0.22s ease !important;

}

ul.discussion-list > li:hover,

.post-list-item:hover,

.discussion-item:hover,

div[class*="post-item"]:hover,

div[class*="discussion-item"]:hover {

transform: translateY(-3px) !important;

background:

linear-gradient(rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.95)) padding-box,

linear-gradient(120deg, #ff8fc7, #a98fff, #8fc4ff) border-box !important;

box-shadow: 0 10px 24px rgba(255, 154, 208, 0.3) !important;

}

.post-list-item a,

.discussion-item a,

div[class*="post-item"] a,

div[class*="discussion-item"] a {

color: #4a3a52 !important;

font-weight: 600 !important;

}

.post-list-item a:hover,

.discussion-item a:hover {

color: #ff6fa5 !important;

}

/* ---------- 6. 右侧栏（用户卡片 / 快捷功能区）：渐变描边 + 玻璃底 ---------- /

.sidebar,

.side-bar,

.widget,

.user-card,

aside,

div[class="sidebar"],

div[class*="Sidebar"] {

background: rgba(255, 255, 255, 0.75) !important;

border: none !important;

backdrop-filter: blur(14px) saturate(150%) !important;

-webkit-backdrop-filter: blur(14px) saturate(150%) !important;

border-radius: 16px !important;

box-shadow: 0 6px 20px rgba(160, 130, 190, 0.1) !important;

margin-bottom: 14px !important;

}

/* ---------- 7. 左侧图标导航栏（日常/技术/情报/测评…）：v2 漏掉的部分，这版补上 ----------

这是一列纵向图标+文字链接，通常在最外层是 nav/aside/ul，用更宽泛的规则兜底覆盖，

同时也覆盖常见 UI 框架命名（ant-menu / el-menu / n-menu / arco menu 等）。 /

nav[class="categor"],

nav[class*="menu"],

ul[class*="categor"],

ul[class*="menu"],

div[class*="categor"],

div[class*="menu"],

div[class*="left-nav"],

div[class*="leftnav"],

div[class*="index-nav"],

div[class*="quick-nav"],

aside[class*="nav"],

.ant-menu,

.el-menu,

.n-menu,

.n-layout-sider,

[class*="arco-menu"] {

background:

linear-gradient(rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.72)) padding-box,

linear-gradient(160deg, #ffb6d5, #b3c4ff) border-box !important;

border: 2px solid transparent !important;

backdrop-filter: blur(14px) saturate(150%) !important;

-webkit-backdrop-filter: blur(14px) saturate(150%) !important;

border-radius: 16px !important;

box-shadow: 0 6px 20px rgba(160, 130, 190, 0.12) !important;

padding: 8px !important;

}

/* 兜底：如果上面的 class 猜测依然没命中左侧导航，

可以在浏览器里 F12 选中那一列，把真实 class 发给我，我直接精确替换。

下面这条是"万能兜底"：给页面里所有看起来像纵向菜单的容器都加玻璃感，

但只在没有背景色的元素上生效，不会影响已经设好背景的卡片。 */

body :where(nav, aside):not([class]) {

background: rgba(255, 255, 255, 0.72) !important;

backdrop-filter: blur(14px) !important;

-webkit-backdrop-filter: blur(14px) !important;

border-radius: 16px !important;

}

/* 左侧导航里的文字，确保清晰可读 /

nav[class="categor"] a,

nav[class*="menu"] a,

ul[class*="categor"] a,

ul[class*="menu"] a,

div[class*="categor"] a,

div[class*="menu"] a,

div[class*="left-nav"] a,

div[class*="leftnav"] a {

color: #4a3a52 !important;

font-weight: 600 !important;

}

/* ---------- 8. 头像 ---------- /

img.avatar,

.user-avatar,

img[class="avatar"],

img[class*="Avatar"] {

border-radius: 50% !important;

border: 2px solid rgba(255, 255, 255, 0.85) !important;

box-shadow: 0 2px 10px rgba(255, 154, 208, 0.35) !important;

transition: transform 0.3s ease !important;

}

img.avatar:hover,

img[class*="avatar"]:hover {

transform: rotate(8deg) scale(1.12) !important;

}

/* ---------- 9. 发帖按钮 / 强调按钮：粉紫渐变 ---------- /

a[class="post-btn"],

button[class*="post-btn"],

a[href*="/write"],

.btn-primary {

background: linear-gradient(135deg, #ff9ad5, #b39dff) !important;

border: none !important;

color: #fff !important;

box-shadow: 0 4px 14px rgba(179, 157, 255, 0.4) !important;

}

/* ---------- 10. 分类标签（日常/技术/交易 等徽标） ---------- /

span[class="category"],

span[class*="tag"],

a[class*="category-tag"] {

background: rgba(255, 182, 224, 0.35) !important;

color: #7a4a68 !important;

border-radius: 8px !important;

border: 1px solid rgba(255, 182, 224, 0.5) !important;

}

/* ---------- 11. 滚动条美化 ---------- */

::-webkit-scrollbar {

width: 10px !important;

}

::-webkit-scrollbar-thumb {

background: linear-gradient(180deg, #ffb6d5, #b3c4ff) !important;

border-radius: 8px !important;

}

::-webkit-scrollbar-track {

background: transparent !important;

}