闲来无事，利用 AI 整了个类似 Liquid Glass 风格的 V2EX 主题

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

由于对于前端方向的技能实在是太渣了，所以利用 AI 并结合了 @lawsiki 的仿微信风格 CSS 样式，前人栽树后人乘凉，感谢 @lawsiki !!

该样式支持白天、夜间模式，喜欢的话自行复制粘贴。

https://i.imgur.com/tTyTVHW.png https://i.imgur.com/lzKRuAj.png

/* =======================
 macOS 26 Liquid Glass 主题 - 浅色模式
 ======================= */

/* 顶栏 */
div#Top {
position: fixed;
width: 100%;
border-bottom: 0px;
backdrop-filter: blur(30px) saturate(160%);
-webkit-backdrop-filter: blur(30px) saturate(160%);
background-color: rgba(255, 255, 255, 0.25);
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.15);
border-radius: 0 0 16px 16px;
z-index: 9999;
transition: all 0.3s ease;
}

div#Wrapper { padding-top: 60px; }

/* 对话框 */
.reply_content:before {
content: "";
width: 0;
height: 0;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-right: 6px solid rgba(255, 255, 255, 0.6);
position: absolute;
top: 10px;
left: -6px;
}

.reply_content {
font-size: 14px;
line-height: 1.6;
color: var(--box-foreground-color);
word-break: break-word;
background: rgba(255, 255, 255, 0.55);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border-radius: 12px;
padding: 10px 14px;
position: relative;
width: fit-content;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
transition: all 0.3s ease;
}

/* 列表单元 */
.cell {
padding: 12px;
font-size: 14px;
line-height: 150%;
text-align: left;
border-bottom: 0px;
background: rgba(255, 255, 255, 0.3);
backdrop-filter: blur(15px) saturate(180%);
-webkit-backdrop-filter: blur(15px) saturate(180%);
border-radius: 10px;
margin-bottom: 10px;
transition: background 0.3s ease;
}

.cell:hover { background: rgba(255, 255, 255, 0.45); }

/* 隐藏回复时间,回复按钮 */
.ago, .fr { display: none; }
form+div>.fr { display: inline; }
.cell:hover .ago,.cell:hover .fr { display: inline; }

/* 头像 */
.cell .avatar { width: 42px; border-radius: 12px; }

/* 背景 */
#Wrapper {
background: linear-gradient(135deg, rgba(240,243,255,0.8), rgba(255,255,255,0.9)) !important;
background-size: cover;
}

/* 卡片 */
.box {
border: 0px !important;
background: rgba(255, 255, 255, 0.3);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border-radius: 16px;
box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

/* 底部按钮条 */
.topic_buttons {
padding: 6px 10px;
font-size: 14px;
line-height: 120%;
border-top: 1px solid rgba(255,255,255,0.3);
background: rgba(255,255,255,0.2);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-radius: 0 0 16px 16px;
}

/* 超级按钮 */
.super.button {
background: rgba(255,255,255,0.4);
backdrop-filter: blur(16px) saturate(160%);
-webkit-backdrop-filter: blur(16px) saturate(160%);
padding: 6px 18px;
border: 1px solid rgba(255,255,255,0.4);
border-radius: 10px;
font-size: 14px;
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Arial, sans-serif;
display: inline-block;
line-height: 1.4;
transition: all 0.25s ease;
}
.super.button:hover {
background: rgba(255,255,255,0.6);
transform: translateY(-1px);
box-shadow: 0 4px 10px rgba(0,0,0,0.12);
}

/* 右栏背景区 */
#Rightbar > div:nth-child(2) > .cell {
background: rgba(255, 255, 255, 0.75);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-radius: 12px;
color: #f5f5f7;
}

/* 发布页内容 */
.cell.topic_content.markdown_body {
background: rgba(255,255,255,0.5) !important;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-radius: 12px;
color: #1C1C1E !important;
}

/* 用户名 */
#Rightbar>.cell span.bigger>a {
color: #ffffff;
font-size: 20px;
font-weight: 500;
}

/* 回复数量 */
a.count_livid:active,
a.count_livid:link {
background: linear-gradient(135deg, #ff6961, #ff8782);
color: white !important;
border-radius: 8px;
padding: 2px 6px;
}

/* 链接交互 */
a:hover, a.topic-link:hover {
text-decoration: none;
opacity: 0.85;
transition: opacity 0.2s ease;
}

/* 回复框 */
textarea#reply_content {
border: 0px;
background: rgba(255,255,255,0.35);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-radius: 12px;
padding: 10px;
font-size: 14px;
transition: all 0.3s ease;
}
textarea#reply_content:focus {
background: rgba(255,255,255,0.55);
outline: none;
}

/* 我的回复 */
.self .reply_content {
background: rgba(48, 209, 88, 0.6);
color: #fff;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
.self .reply_content:after {
content: "";
width: 0;
height: 0;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 6px solid rgba(48, 209, 88, 0.6);
position: absolute;
top: 10px;
right: -6px;
}

/* 标题绿标 */
.header h1:before {
border-left: 4px solid #30d158;
padding-left: 10px;
content: "";
}
.header h1 {
font-size: 22px;
font-weight: 500;
color: #1c1c1e;
}

/* 提交按钮 */
input.normal.button,button.normal.button {
background: linear-gradient(135deg, #30d158, #34c759);
color: #FFF !important;
font-size: 14px;
font-weight: 500;
border:0px;
border-radius: 10px;
padding: 8px 20px;
transition: all 0.3s ease;
}
input.normal.button:hover:enabled,button.normal.button:hover:enabled {
background: linear-gradient(135deg, #4cd964, #30d158);
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(48,209,88,0.3);
}

/* =======================
 macOS 26 Liquid Glass - 暗色模式
 ======================= */
body #Wrapper.Night {
background: none !important;
background-image: none !important;
background-color: #141414 !important;
--box-border-color: #2e445b;
}

/* 夜间主题链接 */
.Night a.topic-link:active,
.Night a.topic-link:link { color: #a3b4c1; }
.Night a.topic-link:visited { color: #606060; }

/* 右栏淡色 */
.Night #Rightbar .fade { color: #1C1C1E; }

/* 卡片 */
.Night .box {
border: none;
background: rgba(20,20,20,0.55);
backdrop-filter: blur(18px) saturate(160%);
-webkit-backdrop-filter: blur(18px) saturate(160%);
border-radius: 16px;
box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}

/* 按钮 */
.Night .normal.button,
.Night .super.button {
color: #fff !important;
border-color: rgba(48,209,88,0.5) !important;
background: rgba(48,209,88,0.4) !important;
}
.Night td.normal.button.disable_now,
.Night td.super.button.disable_now {
color: rgba(255, 255, 255, 0.3) !important;
border-color: #434343 !important;
background: rgba(255, 255, 255, 0.08) !important;
}
.Night .normal.button:hover:enabled,
.Night .super.button:hover:enabled {
background: rgba(48,209,88,0.6) !important;
box-shadow: 0 6px 18px rgba(48,209,88,0.3);
}

/* 文本高亮 */
.Night .outdated { color: #5d9bad; }

/* 图片 */
.Night img { filter: brightness(0.9); }

/* 话题信息 */
.Night .topic_info a { color: #738292; }

/* 选择框 */
.Night select { color: #d1d5d9; background: rgba(20,20,20,0.35); }
.Night .select2-container--default .select2-selection--single {
border-color: var(--box-border-color);
background-color: rgba(24,34,45,0.75);
}
.Night .select2-container--default .select2-selection--single .select2-selection__rendered {
color: #d1d5d9;
}

/* 表单卡片 */
.Night .box form .cell { background-color: transparent !important; }
.Night .selectboxit-default-arrow { border-top: 4px solid #fff; }
.Night select,
.Night .sl,
.Night .ml,
.Night .select2-container--default .select2-selection--single { border-color: var(--box-border-color); }

/* 代码编辑器 */
.Night .CodeMirror-scroll { color: #fff; }

/* 对话框气泡 */
.Night .reply_content {
background: rgba(28,28,30,0.65);
color: #f5f5f7;
backdrop-filter: blur(20px) saturate(150%);
-webkit-backdrop-filter: blur(20px) saturate(150%);
box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.Night .self .reply_content {
background: rgba(48,209,88,0.55);
}

liquid glass

V2EX

6 条回复 • 2025-09-13 23:15:33 +08:00