由于对于前端方向的技能实在是太渣了,所以利用 AI 并结合了 @lawsiki 的仿微信风格 CSS 样式,前人栽树后人乘凉,感谢 @lawsiki !!
该样式支持白天、夜间模式,喜欢的话自行复制粘贴。
https://i.imgur.com/tTyTVHW.pnghttps://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);}
