@charset "utf-8"; /* header / footer 样式：按 DESIGN-vercel.md 调整颜色风格 画布 var(--color-canvas) + 墨色 var(--color-ink) + 1px 发丝线 var(--color-hairline)。 灰阶文字：var(--color-body) body / var(--color-mute) mute / var(--color-faint) faint。图片保留原色，不做滤镜处理。 */ /* ============ PC 端导航 ============ */ .pc_header { width: 100%; background: var(--color-canvas); height: 6.25em; box-sizing: border-box; } /* 导航容器：flex 布局，左侧 logo+菜单，右侧工具区 */ .pc_nav { display: flex; align-items: center; } .pc_nav > a { flex: 0 0 auto; width: 18.75em; text-align: center; line-height: 6.25em; } .pc_nav > a > img { width: 15.625em; max-width: 15.625em; } /* 主题化 logo：浅色用 _q，深色用 _s，按 切换； 不支持 img content 的浏览器回退显示 src（浅色 _q.png） */ .site-logo { content: url(../images/logo_wuzuniao_com_q.png); } :root[data-theme="dark"] .site-logo { content: url(../images/logo_wuzuniao_com_s.png); } /* 页脚图标：深色模式换用反色版（黑白反色为白、蓝/红保持原色，由脚本生成 _s.png） */ :root[data-theme="dark"] .footer-ewm-wx { content: url(../images/ewm_wx_s.png); } :root[data-theme="dark"] .footer-ewm-qq { content: url(../images/ewm_qq_s.png); } :root[data-theme="dark"] .footer-github { content: url(../images/github_s.png); } /* 一级菜单样式 */ .pc_nav > ul { display: flex; flex: 0 0 auto; margin-left: 0.5em; } .pc_nav > ul > li { flex: 0 0 auto; } .pc_nav > ul > li > a { line-height: 6.25em; display: block; text-align: left; padding: 0 0.5em; font-size: 1em; font-weight: 500; color: var(--color-body); transition: color 0.15s ease; } .pc_nav > ul > li:hover > a { color: var(--color-link); } /* 二级菜单样式（纯文字、无底无边框；悬停仅改文字颜色；无子项的一级菜单不响应） */ .pc_nav > ul > li > .pc_nav2_ul { position: absolute; z-index: 99; width: auto; text-align: left; padding: 0.25rem 0; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s; } /* 仅当一级菜单含二级链接时悬停才展开，作为一级导航的延伸 */ .pc_nav > ul > li:has(.pc_nav2_li a):hover > .pc_nav2_ul { opacity: 1; visibility: visible; transform: translateY(0); } .pc_nav > ul > li > .pc_nav2_ul > .pc_nav2_li > a { display: block; line-height: 2.75em; padding-left: 0.5em; white-space: nowrap; color: var(--color-body); font-size: 0.875em; transition: color 0.15s ease, background 0.15s ease; } .pc_nav > ul > li > .pc_nav2_ul > .pc_nav2_li > a:hover { color: var(--color-link); } /* 二级菜单背景面板：悬停含子链接的一级菜单时显示（白底、近不透明，遮住原页面） */ .pc_nav_both { position: absolute; left: 0; top: 6.25em; width: 100%; height: 100%; z-index: 98; background: var(--color-canvas); opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s; } .pc_nav:has(> ul > li:hover .pc_nav2_li a) .pc_nav_both { opacity: 0.92; visibility: visible; } /* ============ 右侧工具区（主题切换 + 中英文切换，占位） ============ */ .pc_nav_tools { flex: 0 0 auto; margin-left: auto; display: flex; align-items: center; gap: 0.625em; } /* 主题切换：分段胶囊（当前项为墨色底白字） */ .theme_toggle { display: inline-flex; align-items: center; padding: 0.1875em; border: 1px solid var(--color-hairline); border-radius: 9999px; background-color: var(--color-elevated); } .theme_opt { display: inline-flex; align-items: center; gap: 0.35em; padding: 0.3em 0.85em; border: 0; border-radius: 9999px; background: transparent; color: var(--color-mute); font-size: 0.8125em; line-height: 1.4; cursor: pointer; transition: color 0.15s ease, background 0.15s ease; } .theme_opt.is-active { background-color: var(--color-ink); color: var(--color-on-primary); } /* 主题段内图标：复用 sun/moon PNG，当前项（墨色底）反白显示 */ .theme_icon { display: block; width: 1em; height: 1em; } .theme_opt.is-active .theme_icon { filter: brightness(0) invert(1); } .theme_opt:not(.is-active):hover { color: var(--color-ink); } .theme_opt:focus { outline: none; } /* 中英文切换：自定义下拉单选框（展开面板与整体风格一致，非系统默认） */ .lang_select { position: relative; } .lang_trigger { display: inline-flex; align-items: center; gap: 0.4em; margin: 0; padding: 0.3em 1.6em 0.3em 0.85em; border: 1px solid var(--color-hairline); border-radius: 9999px; background-color: var(--color-elevated); color: var(--color-body); font-size: 0.8125em; line-height: 1.4; cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease; /* 自定义下拉箭头（内联 SVG 数据 URI，离线可用） */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238f8f8f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.7em center; background-size: 0.75em; } .lang_trigger:hover { border-color: var(--color-hairline-strong); color: var(--color-ink); } .lang_trigger:focus { outline: none; border-color: var(--color-ink); } /* 展开面板：白底发丝边圆角，与界面协调 */ .lang_menu { position: absolute; top: calc(100% + 0.4em); right: 0; min-width: 100%; margin: 0; padding: 0.25em 0; list-style: none; box-sizing: border-box; background-color: var(--color-elevated); border: 1px solid var(--color-hairline); border-radius: 0.75em; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s; z-index: 100; } .lang_select.is-open .lang_menu { opacity: 1; visibility: visible; transform: translateY(0); } .lang_item { padding: 0.45em 1em; white-space: nowrap; color: var(--color-body); font-size: 0.8125em; line-height: 1.4; cursor: pointer; transition: color 0.15s ease, background-color 0.15s ease; } .lang_item:hover, .lang_item.is-selected { color: var(--color-link); background-color: var(--color-canvas); } /* ============ 页脚 ============ */ footer { width: 100%; /* 取消顶部横线分割；背景改为纯白 var(--color-elevated)，在整体 var(--color-canvas) 画布上轻微区分 */ background: var(--color-elevated); color: var(--color-body); } .footer_erweima { overflow: hidden; /* 白底页脚内的主分割线用最强的 hairline-strong（二维码/主链接块与下方子页链接的分界）， 作为页脚最顶层级分隔，在纯白底上最清晰有质感 */ border-bottom: 1px solid var(--color-hairline-strong); box-sizing: border-box; padding-bottom: 20px; } .footer_erweima > div { width: 200px; display: inline-block; text-align: center; float: left; } .footer_erweima > div:last-child { width: 400px; } .footer_erweima > div > a { display: block; font-size: 1em; font-weight: 500; color: var(--color-body); line-height: 3em; transition: color 0.15s ease; } .footer_erweima > div > a:hover { color: var(--color-link); } .footer_erweima > div:last-child > a { margin-top: 65px; } .footer_ziye { display: block; /* 去掉与上方 .footer_erweima 底边线相邻的重复 border-top，避免重影双线； 仅保留底部单线。页脚层级：.footer_erweima 底用 hairline-strong（主分割）， 此处用更弱的 hairline（次分割），形成强→弱层级，避免等色无层次 */ border-bottom: 1px solid var(--color-hairline); box-sizing: border-box; } .footer_ziye > a { font-size: 0.875em; color: var(--color-body); line-height: 3em; margin-left: 1em; transition: color 0.15s ease; } .footer_ziye > a:hover { color: var(--color-link); } .footer_ziye > a > img { margin-bottom: 0.9em; } #github { margin-left: 19em; } .copyright { text-align: center; padding-top: 0.75em; padding-bottom: 0.75em; font-size: 0.875em; } .copyright > p { line-height: 1.5em; color: var(--color-mute); } .copyright > p > a { color: var(--color-mute); transition: color 0.15s ease; } .copyright > p > a:hover { color: var(--color-link); } .gongan { margin-left: 1em; } .gongan > img { margin-bottom: 2px; } /* PC 界面下隐藏手机版内容 */ .m_qian { display: none; } .m_hou { display: none; } .m_footer { display: none; } /* 小于 1600 大于 1200 稍微调整字体 */ @media screen and (max-width: 1600px) and (min-width: 1025px) { /* 导航栏 */ .pc_nav > ul > li > a { font-size: 0.9375em; } .pc_nav > ul > li > .pc_nav2_ul > .pc_nav2_li > a { font-size: 0.8125em; } /* 页脚 */ .footer_erweima > div > a { font-size: 0.9375em; } .footer_ziye > a { font-size: 0.8125em; } .copyright { font-size: 0.8125em; } } /* ============ 移动端 ============ */ @media screen and (max-width: 1024px) { /* 统一移动端导航抽屉与 +/- 图标位置：通过 .m_hou.is-open 使用 100vw 锚定物理右缘 （见下方 .m_hou.is-open 规则），不再依赖 html overflow hack */ /* 移动端导航 */ .pc_header { display: none; } .m_qian { display: block; height: 60px; background: var(--color-canvas); width: 100%; overflow: hidden; } .m_qian .m_qian_lf { padding-top: 5px; padding-left: 5px; float: left; } .m_qian .m_qian_lf .m_qian_logo { height: 50px; display: block; } .m_qian .m_qian_rg { padding-right: 5%; padding-top: 17.5px; float: right; } .m_qian .m_qian_rg a .m_qian_menuimg { height: 25px; display: block; } /* 抽屉容器：默认收起，is-open 展开 */ .m_hou { display: block; position: fixed; top: 0; left: 0; width: 0; height: 0; overflow: hidden; z-index: 10000; } .m_hou.is-open { /* 用 100vw（物理视口宽，与滚动条是否占布局无关）替代 100%， 使首页（有滚动条）与子页（无滚动条）的抽屉容器宽度锚定到同一物理右缘， 彻底消除 +/- 图标 right 锚点的跨页差异 */ width: 100vw; height: 100%; } .m_hou .m_hou_beijing { position: absolute; width: 100%; height: 100%; background: var(--color-canvas); opacity: 0; left: 0; top: 0; z-index: 1; transition: opacity 0.3s ease; } .m_hou.is-open .m_hou_beijing { opacity: 0.9; } .m_hou .m_hou_tubiao_beijing { position: absolute; width: 20%; left: 0; top: 5%; z-index: 10; text-align: center; opacity: 0; transition: opacity 0.3s ease; } .m_hou.is-open .m_hou_tubiao_beijing { opacity: 1; } .m_hou .m_navList { position: absolute; width: 80%; top: 0; background: var(--color-elevated); border-left: 1px solid var(--color-hairline); height: 100%; z-index: 10; right: -80%; overflow-y: auto; scrollbar-gutter: stable; transition: right 0.3s ease; } .m_hou.is-open .m_navList { right: 0; } .m_hou .m_navList ul { padding-left: 5%; padding-right: 5%; } /* 移动端抽屉顶部工具区：复用主题切换 + 中英文切换组件，与导航列表以发丝线分隔 */ .m_nav_tools { display: flex; align-items: center; justify-content: space-between; gap: 0.625em; padding: 0.75em 5%; border-bottom: 1px solid var(--color-hairline); } .m_hou .m_navList ul li { border-bottom: 1px solid var(--color-hairline); } .m_hou .m_navList ul li a { display: block; height: 45px; color: var(--color-body); line-height: 45px; padding-left: 5%; font-size: 1em; transition: color 0.15s ease; } .m_hou .m_navList ul > li > a:hover, .m_hou .m_navList ul > li .m_navList_a > a:hover { color: var(--color-link); } .m_hou .m_navList ul li .m_navList_a { position: relative; width: 100%; } .m_hou .m_navList ul li .m_navList_a a { display: block; padding-right: 60px; /* 为 +/- 图标预留固定空间，避免抽屉宽度变化影响图标位置 */ } .m_hou .m_navList ul li .m_navList_a i { position: absolute; top: 5px; /* right 相对 .m_navList_a 右缘；该右缘距抽屉/物理右缘约 46px， 故图标实际距右缘约 46+right px，远离经典滚动条(~17px)，不会被遮挡。 当前 5px：整体更靠右（相对上次的 12px 再右移 7px）。 */ right: 5px; width: 20px; height: 35px; display: block; } /* 展开/收起图标（仅含子链接的项显示）：深色描边，浅色模式 */ .m_hou_icon { background: url(../images/plus.png) no-repeat 50% 50%; background-size: 20px 20px; } .m_navList li.is-expanded .m_hou_icon { background: url(../images/reduce.png) no-repeat 50% 50%; background-size: 20px 20px; } /* 子导航：max-height 过渡 */ .m_hou .m_navList ul li .m_navList_nav { width: 100%; max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .m_hou .m_navList ul li.is-expanded > .m_navList_nav { max-height: 320px; } .m_hou .m_navList ul li .m_navList_nav a { display: block; height: 40px; line-height: 40px; font-size: 0.875em; padding-left: 10%; overflow: hidden; white-space: nowrap; width: 90%; text-overflow: ellipsis; color: var(--color-body); transition: color 0.15s ease; } .m_hou .m_navList ul li .m_navList_nav a:hover { color: var(--color-link); } /* 移动端页脚 */ .footer { display: none; } .m_footer { display: block; padding: 2rem 1.25rem; background: var(--color-elevated); } .m_footer_erweima { overflow: hidden; } .m_footer_erweima > a { display: inline-block; width: 33.3333%; font-size: 0.875em; color: var(--color-body); line-height: 2em; text-align: center; float: left; transition: color 0.15s ease; } .m_footer_erweima > a:hover { color: var(--color-link); } .m_footer_ziye { /* 移动端层级同 PC：上边线为 erweima|ziye 主分割（hairline-strong）， 下边线为 ziye|copyright 次分割（hairline），强→弱体现层级 */ border-top: 1px solid var(--color-hairline-strong); border-bottom: 1px solid var(--color-hairline); box-sizing: border-box; padding: 0.5em 0 0.5em 0; margin-top: 0.5em; margin-bottom: 0.5em; } .m_footer_ziye > a { font-size: 0.75em; color: var(--color-body); line-height: 2em; margin-left: 1em; transition: color 0.15s ease; } .m_footer_ziye > a:hover { color: var(--color-link); } .m_copyright { text-align: center; font-size: 0.75em; } .m_copyright > p { line-height: 1.5em; color: var(--color-mute); } .m_copyright > p > a { color: var(--color-mute); transition: color 0.15s ease; } .m_copyright > p > a:hover { color: var(--color-link); } .gongan { margin-left: 0; } } /* 主题图标：浅色模式激活态反白；深色模式激活态保持深色 PNG（背景转亮），非激活态反白 */ :root[data-theme="dark"] .theme_opt.is-active .theme_icon { filter: none; } :root[data-theme="dark"] .theme_opt:not(.is-active) .theme_icon { filter: invert(1); } /* ============ 移动端导航功能图标：随主题切换 ============ */ /* 菜单/关闭/展开收起图标均为深色 PNG，无白色变体；深色模式下统一反色为白（功能性控件，与 .theme_icon 同处理） */ :root[data-theme="dark"] .m_qian_menuimg, :root[data-theme="dark"] .m_hou_tubiao_beijing img, :root[data-theme="dark"] .m_hou_icon { filter: invert(1); } /* ============