/* ============================================================= Discuz! N7 · 「液态玻璃 Liquid Glass」视觉升级层 ------------------------------------------------------------- 说明： - 本文件仅做外观覆盖，不改任何模板 DOM / PHP 逻辑 / 功能； - 实现原理：复用模板自带的 CSS 变量体系 + backdrop-filter 毛玻璃； - 卸载方式：删除本文件，并去掉 header_common.php 中对应的一行引入，即可 100% 还原原主题； - 兼容性：Chrome / Edge / Firefox(>=103) / Safari 完整生效；不支持 backdrop-filter 的旧浏览器自动退化为「半透明 + 光晕渐变 + 高光描边」的玻璃质感，功能零影响； - 暗色模式：由 JS 在上添加 .comiis_dark 标记，本文件据此自动避让，不破坏原有夜间模式。 ============================================================= */ /* ---------- 0) 暗色模式自动避让（兜底暗色样式未定义、但本层改过值的变量） ---------- */ body.comiis_dark { --comiis-nvbg: rgba(58,122,255,0.55); /* 导航当前项：蓝色玻璃 */ --comiis-nvbga: rgba(255,255,255,0.10); /* 导航悬停：弱白玻璃 */ --comiis-nvtxta: #a9c6ff; /* 导航悬停文字 */ --comiis-shadow: 0 10px 30px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.06); } /* ---------- 1) 全局变量 → 半透明玻璃 ---------- 模板几乎全部表面都引用这些变量，改掉它们即可让所有面板整体变玻璃，且暗色模式样式（后加载）会自行覆盖回深色值。 */ :root { --comiis-bgf: rgba(255,255,255,0.38); /* 面板底色 */ --comiis-bgc: rgba(255,255,255,0.30); /* 次级底色 */ --comiis-bgb: rgba(255,255,255,0.50); /* 标题/头像底 */ --comiis-bga: rgba(255,255,255,0.55); /* 高亮底 */ --comiis-bordera: rgba(255,255,255,0.60); /* 玻璃描边 */ --comiis-borderb: rgba(255,255,255,0.55); --comiis-borderc: rgba(255,255,255,0.65); --comiis-nvbg: rgba(21,91,213,0.62); /* 导航当前项：蓝色玻璃 */ --comiis-nvbga: rgba(255,255,255,0.32); /* 导航悬停：白色玻璃 */ --comiis-shadow: 0 10px 30px rgba(31,60,110,0.10), 0 2px 8px rgba(31,60,110,0.06), inset 0 1px 0 rgba(255,255,255,0.45); } /* ---------- 2) 页面底色 → 柔和光晕渐变（液态玻璃的氛围底） ---------- 注：extend_module.css 搜索区有 body{background:var(--comiis-bgf) !important}，会盖掉渐变，故此处同样用 !important（暗色模式由 :not(.comiis_dark) 自动避让）。 */ body:not(.comiis_dark) { background-color: #e6f0ff !important; background-image: radial-gradient(60% 50% at 8% 10%, rgba(110,175,255,0.62) 0%, rgba(110,175,255,0) 60%), radial-gradient(50% 42% at 93% 8%, rgba(168,115,255,0.55) 0%, rgba(168,115,255,0) 60%), radial-gradient(46% 40% at 30% 34%, rgba(120,190,255,0.42) 0%, rgba(120,190,255,0) 62%), radial-gradient(46% 40% at 72% 62%, rgba(150,130,255,0.36) 0%, rgba(150,130,255,0) 62%), radial-gradient(55% 48% at 90% 86%, rgba(80,210,255,0.52) 0%, rgba(80,210,255,0) 60%), radial-gradient(55% 48% at 8% 90%, rgba(255,140,195,0.44) 0%, rgba(255,140,195,0) 60%), linear-gradient(158deg, #e3eeff 0%, #ece5ff 46%, #e4f7ff 100%) !important; background-attachment: fixed !important; background-repeat: no-repeat !important; } /* ---------- 3) 毛玻璃底座：常用面板统一模糊 + 色彩饱和 ---------- */ .bm, .bn, .comiis_bm, .comiis_ngbox, .comiis_bdl, .appl, .ct2 .sd, .ct2_a .mn, .ct2_a_r .mn, .ct3_a .sd, .ct3_a .mn, .comiis_forumlist, .comiis_grouplist, .comiis_forumdisplay, .comiis_uhd_box, .comiis_view_box, .comiis_portal_view, .comiis_portal_list, .comiis_ft, .comiis_footb, .p_pop, .sltm, .p_pof, .fwin, #comiis_user_menu, #qmenu_menu, .comiis_mysearch { -webkit-backdrop-filter: blur(16px) saturate(165%); backdrop-filter: blur(16px) saturate(165%); } /* ---------- 4) 头部玻璃 ---------- */ /* 顶部导航条 → 深色半透明（取消backdrop-filter，避免影响DIY按钮渲染） */ #toptb.comiis_headb_toptb { background: rgba(20,30,66,0.75); } /* 主头部（logo / 导航 / 用户区）→ 白色液态玻璃；滚动吸顶（comiis_fixed_top_nv）时内容从下方透出，毛玻璃效果最佳 */ body:not(.comiis_dark) #comiis_tnv.comiis_headb { background: rgba(255,255,255,0.42); -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%); box-shadow: 0 6px 24px rgba(31,60,110,0.08), inset 0 1px 0 rgba(255,255,255,0.50); } /* ---------- 5) 输入框 / 编辑器 → 更实一些的玻璃，保证可读性 ---------- */ .px, .pt, .ps, textarea, .tedt, .tedt .area, .comiis_headb_scbar .kmtxt, .comiis_mysearch .kmtxt, .mi #moodfm textarea, .scbar_narrow #scbar_txt, #scbar_type { background-color: rgba(255,255,255,0.62); } /* ---------- 6) 弹窗 / 下拉 → 稍实玻璃，兼顾可读性 ---------- */ .p_pop, .sltm, .p_pof, #comiis_user_menu, .comiis_mysearch { background-color: rgba(255,255,255,0.72); } .fwin, .fwinmask .fwin { background-color: rgba(255,255,255,0.42); -webkit-backdrop-filter: blur(28px) saturate(185%); backdrop-filter: blur(28px) saturate(185%); } /* ---------- 7) 页脚 → 深色玻璃 ---------- */ .comiis_footb { background: rgba(16,24,56,0.50); color: #c3cdea; } .comiis_footb_info .info_box .info_li { color: #c0cbe9; } .comiis_footb_info .info_box h2 { color: #f2f5ff; } .comiis_footb_copy { background: rgba(8,12,30,0.62); color: #9db0d8; } .comiis_footb_copy a, .comiis_footb_copy span.pipe { color: #9db0d8; } /* ---------- 8) 玻璃面板的高光内描边 + 柔和投影（液态质感） ---------- */ .bm, .bn, .comiis_bm, .comiis_ngbox, .comiis_bdl, .appl, .ct2 .sd, .ct2_a .mn, .ct2_a_r .mn, .ct3_a .sd, .ct3_a .mn, .comiis_forumlist, .comiis_grouplist, .comiis_forumdisplay, .comiis_uhd_box, .comiis_view_box, .comiis_portal_view, .comiis_portal_list { box-shadow: 0 10px 30px rgba(31,60,110,0.10), 0 2px 8px rgba(31,60,110,0.06), inset 0 1px 0 rgba(255,255,255,0.45); } /* ---------- 9) DIY 入口按钮兼容：层级高于主头部 ---------- */ #toptb { position: relative; z-index: 999; } #toptb #diy-tg { position: relative; z-index: 99999; } #toptb #diy-tg_menu { position: absolute; z-index: 99999; } /* DIY 模式下控制面板层级 */ #controlpanel, #controlheader, #samplepanel { position: relative; z-index: 99999; } /* ---------- 10) DZX5 第三方登录（QQ等）样式在 cells/account/icons.htm 内联 ---------- */ /* ---------- 11) 弹窗登录液态玻璃 ---------- */ /* 弹窗九宫格背景全部透明，露出玻璃 */ .fwin .t_l, .fwin .t_c, .fwin .t_r, .fwin .m_l, .fwin .m_r, .fwin .b_l, .fwin .b_c, .fwin .b_r { background: transparent; } .fwin .m_c { background: rgba(255,255,255,0.35) !important; -webkit-backdrop-filter: blur(28px) saturate(185%); backdrop-filter: blur(28px) saturate(185%); } .fwin .comiis_login_box { background: transparent; border-radius: 12px; overflow: hidden; box-shadow: 0 20px 50px rgba(31,60,110,0.18), inset 0 1px 0 rgba(255,255,255,0.6); } .fwin .comiis_login_from { background: transparent; } /* 弹窗遮罩 */ .fwinmask { background: rgba(20,30,60,0.35); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } /* ---------- 12) 第三方登录按钮（金色怀旧药丸，兜底覆盖 icons.htm 内联样式） ---------- */ .comiis_thirdlogin{margin:16px 0 4px;text-align:center} .comiis_thirdlogin_tit{display:flex !important;align-items:center;justify-content:center;color:#b8860b !important;font-size:12px;letter-spacing:3px;margin-bottom:12px} .comiis_thirdlogin_tit::before,.comiis_thirdlogin_tit::after{content:"";flex:1;border-top:1px dashed #d4a017;opacity:.45} .comiis_thirdlogin_tit span{padding:0 12px} .comiis_thirdlogin_list{display:flex !important;justify-content:center;flex-wrap:wrap;gap:10px} .comiis_thirdlogin_item{display:inline-flex !important;align-items:center;gap:6px;padding:7px 20px !important;border:1px solid #d4a017 !important;border-radius:22px !important;background:linear-gradient(180deg,#fffbf0,#fbf0d2) !important;color:#8b2500 !important;text-decoration:none;font-size:13px;line-height:1;transition:all .25s;box-shadow:0 1px 3px rgba(180,140,20,.15);white-space:nowrap} .comiis_thirdlogin_item:hover{background:linear-gradient(180deg,#f1c40f,#d4a017) !important;color:#fff !important;border-color:#b8860b !important;box-shadow:0 2px 10px rgba(212,160,23,.45);transform:translateY(-1px)} .comiis_thirdlogin_icon{display:inline-flex !important;align-items:center;justify-content:center;flex-shrink:0} .comiis_thirdlogin_icon svg{width:20px;height:20px;fill:currentColor;vertical-align:middle} .comiis_thirdlogin_icon img{width:20px;height:20px;vertical-align:middle;border:0} .comiis_thirdlogin_name{display:inline !important;font-style:normal !important;font-weight:bold;writing-mode:horizontal-tb;white-space:nowrap} .comiis_thirdlogin_item:hover .comiis_thirdlogin_name{color:#fff !important}