/* 基础样式重置 */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } a { text-decoration: none; color: white; } a:hover { color: white; } /* 排版样式 */ h1, h2, h3, h4, h5 { margin-top: 1em; margin-bottom: 0.5em; font-family: "ff-tisa-web-pro-1", "ff-tisa-web-pro-2", "Lucida Grande", "Hiragino Sans GB", "Hiragino Sans GB W3", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; font-weight: lighter; color: #333; -webkit-font-smoothing: antialiased; } h1 { margin-top: 0; font-size: 2.5em; line-height: 1.2em; letter-spacing: 0.05em; } h2 { font-size: 2em; } h3 { font-size: 1.6em; } h4 { font-size: 1.2em; } h5 { font-size: 1em; } p { margin-bottom: 1.3em; line-height: 1.7em; } strong { font-weight: bold; } em { font-style: italic; } blockquote { padding: 10px 20px; margin: 0 0 20px; font-family: "ff-tisa-web-pro-1", "ff-tisa-web-pro-2", "Lucida Grande", "Hiragino Sans GB", "Hiragino Sans GB W3", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; font-weight: lighter; font-size: 1em; border-left: 3px solid #4e97d8; } /* 表格样式 */ figure table { border-collapse: collapse; border-spacing: 0; width: 100%; table-layout: fixed; text-align: left; border-width: 0px; margin: auto; } figure th, figure td { padding: 0px; } /* 代码样式 */ code { padding: 0.1em 0.4em; background: #e8f2fb; border: 1px solid #c9e1f6; border-radius: 3px; font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif; font-size: 0.9em; vertical-align: bottom; word-wrap: break-word; } pre { margin-bottom: 1.3em; padding: 1em 2.5%; background: #e8f2fb; border: 1px solid #c9e1f6; border-radius: 3px; font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif; font-size: 0.9em; font-weight: normal; line-height: 1.7em; overflow: scroll; } pre code { padding: 0; background: none; border: none; word-wrap: normal; } /* 主要布局样式 */ /* 圆形元素样式 */ .avatar, .logo, .profilepic { border-radius: 50%; border: 3px solid transparent; box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.3); transition: all 0.3s ease; } /* 头像容器样式 */ .ih-item { position: relative; display: inline-block; width: 160px; height: 160px; margin: 0; border-radius: 50%; overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } .ih-item.circle { position: relative; width: 160px; height: 160px; border-radius: 50%; } .ih-item.circle .img { position: absolute; width: 100%; height: 100%; border-radius: 50%; transition: all 0.5s ease; } .ih-item.circle .info { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); border-radius: 50%; opacity: 0; transition: all 0.5s ease; transform: scale(0.5); } .ih-item.circle:hover .info { opacity: 1; transform: scale(1); } .ih-item.circle .info-back { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; display: flex; align-items: center; justify-content: center; } /* 右到左效果 */ .ih-item.circle.effect.right_to_left .img { transition: all 0.5s ease; } .ih-item.circle.effect.right_to_left:hover .img { transform: translateX(-100%); } /* 头像图片样式 */ .profilepic { width: 100%; height: 100%; object-fit: cover; } /* 抖动效果 */ .profilepic:hover { animation: shake 0.8s ease; } @keyframes shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); } 20%, 40%, 60%, 80% { transform: translateX(5px); } } /* 响应式适配 */ @media all and (max-width: 510px) { .navigation { line-height: 50px; } } @media all and (max-width: 340px) { .panel-main__inner { padding: 0 5%; } .panel-title { margin-bottom: 0.1em; font-size: 1.5em; } .panel-subtitle { font-size: 0.9em; } } /* 自定义类样式 */ .iUp { opacity: 0; transform: translate3d(0, 80px, 0); transition: all 2s cubic-bezier(0.19, 1, 0.22, 1); } .iUp.up { opacity: 1; transform: translate3d(0, 0, 0); } /* 弹窗美化 */ .iziToast-message.slideIn { margin-top: 5px !important; } /* 新增iframe容器样式 */ #moments-container { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 800px; background-color: #fff; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); z-index: 9999; opacity: 0; transition: opacity 0.5s ease; } #moments-container.visible { opacity: 1; } /* 遮罩层 */ .overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: none; z-index: 9998; } /* 设备适配 */ /* 重要布局组件样式 */ .panel { display: table; width: 100%; height: 100%; } .panel-title { font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif; margin: 0 0 15px 0; font-size: 2.8em; color: #fff; letter-spacing: 2px; } .panel-subtitle { font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif; font-size: 1.3em; font-weight: normal; letter-spacing: 2px; color: #f0f0f0; -webkit-font-smoothing: antialiased; margin-bottom: 20px; } /* 一言元素样式 - 细腻优雅字体 */ .panel-cover__description { font-family: 'Source Han Serif SC', 'Noto Serif SC', 'PingFang SC', 'Hiragino Sans GB W3', 'Apple LiGothic Medium', 'Microsoft YaHei UI Light', serif; font-size: 0.9em; font-weight: 200; line-height: 2; letter-spacing: 2px; color: #ffffff; text-shadow: 0 1px 2px rgba(141, 114, 114, 0.2) !important; position: relative; z-index: 1; font-feature-settings: 'kern' 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* 一言元素的强调文字样式 */ .panel-cover__description strong { font-weight: 400; color: #ffffff; opacity: 0.9; } .panel-cover { display: block; position: fixed; z-index: 900; width: 100%; max-width: none; height: 100%; background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), center center no-repeat #666; background-size: cover; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; transform: translate3d(0, 0, 0); transition: width 0.6s ease; } .panel-cover--collapsed { width: 30%; } .panel-cover--overlay { display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0.7); z-index: 1; opacity: .75; } .panel-main { display: table; width: 100%; height: 100%; } .panel-main__inner { display: table-cell; vertical-align: middle; position: relative; z-index: 800; padding: 40px; text-align: center; } .panel-main__content { max-width: 620px; margin: 0px auto; padding: 30px; border-radius: 15px; background-color: transparent; border: none; } .panel-inverted { font-weight: 100; text-align: center; color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); } .panel-inverted a { color: #fff; } /* 现代化按钮样式 */ .btn, .navigation__item a { padding: 8px 16px; border: 2px solid transparent; border-radius: 25px; font-size: 0.95em; font-weight: 450; letter-spacing: 1.2px; text-shadow: none; color: #fff; background: linear-gradient(135deg, rgba(255,255,255,0.01) 0%, rgba(255,255,255,0.005) 100%); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); box-shadow: 0 2px 8px rgba(0,0,0,0.03); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; -webkit-font-smoothing: antialiased; } .btn:hover, .navigation__item a:hover { color: #fff; background: linear-gradient(135deg, rgba(102, 126, 234, 0.25), rgba(118, 75, 162, 0.22), rgba(240, 147, 251, 0.18)); box-shadow: 0 4px 15px rgba(102, 126, 234, 0.15); border-color: transparent; opacity: 1; } /* 现代化导航样式 */ nav { display: inline-block; position: relative; margin: 0 0; animation: navFadeIn 0.8s ease-out; } @keyframes navFadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .navigation { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 15px; margin: 0; padding: 12px; list-style-type: none; background: rgba(255, 255, 255, 0.008); border-radius: 30px; backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(5px); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05); position: relative; overflow: hidden; } .navigation::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.01) 50%, transparent 70%); animation: shimmer 3s ease-in-out infinite; } @keyframes shimmer { 0%, 100% { transform: translateX(-100%); } 50% { transform: translateX(100%); } } .navigation__item { margin: 0; line-height: 0.5em; position: relative; z-index: 2; } .navigation__item a { display: inline-block; padding: 10px 16px; color: #ffffff; text-decoration: none; border-radius: 20px; font-weight: 450; font-size: 0.7em; letter-spacing: 0.5px; position: relative; opacity: 0.9; transition: all 0.3s ease; z-index: 1; background: rgba(255, 255, 255, 0.008); border: 0.5px solid rgba(255, 255, 255, 0.06); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(3px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); } .navigation__item a::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, 0.008); border-radius: 20px; z-index: -1; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); margin: 0.5px; } /* FAB图标样式 */ .fab { font-family: "Font Awesome 6 Brands" !important; font-style: normal !important; font-variant: normal !important; text-rendering: auto !important; -webkit-font-smoothing: antialiased !important; } /* 主导航样式 */ .cover-navigation--primary .navigation__item a { margin: 0; position: relative; z-index: 1; } .cover-navigation--primary .navigation__item a:active { transform: translateY(0); box-shadow: 0 4px 15px rgba(102, 126, 234, 0.2); } /* 社交图标导航样式 - 完全重写版本 */ .social-icons-row { margin-top: 40px; /* 与上一行的间距 */ width: 100%; text-align: center; display: block; clear: both; } .social-icons-row:after { content: ""; display: table; clear: both; } .social-icons-row .social-icon { display: inline-block; margin: 0 4%; float: none; position: relative; } /* 导航响应式设计 */ /* 超小屏幕优化 (320px - 375px) */ @media screen and (max-width: 375px) { .navigation { padding: 6px; gap: 4px; margin: 0 5px; } .navigation__item a { padding: 5px 8px; font-size: 0.65em; border-radius: 12px; } .social-icons-row { gap: 12px; margin-top: 20px; } .social-icons-row .social-icon a { width: 36px; height: 36px; padding: 6px; } .social-icons-row .social-icon svg { width: 16px; height: 16px; } } @media screen and (max-width: 1024px) { .navigation { padding: 12px; gap: 10px; } .btn, .navigation__item a { padding: 8px 16px; font-size: 0.8em; } .social-icons-row .social-icon { margin: 0 1.5%; } .social-icons-row .social-icon a { font-size: 1.1em; } } @media screen and (max-width: 768px) { /* 平板端导航优化 */ .navigation { padding: 10px; gap: 8px; border-radius: 20px; flex-wrap: wrap; justify-content: center; } .btn, .navigation__item a { padding: 7px 14px; font-size: 0.75em; letter-spacing: 0.5px; border-radius: 18px; } /* 平板端社交图标优化 */ .social-icons-row { margin-top: 30px; display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; } .social-icons-row .social-icon { margin: 0; } .social-icons-row .social-icon a { font-size: 1.05em; padding: 6px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(8px); } .social-icons-row .social-icon svg { width: 16px; height: 16px; } } @media screen and (max-width: 480px) { /* 导航区域移动端优化 */ .navigation { padding: 8px; gap: 6px; flex-direction: row; flex-wrap: wrap; justify-content: center; max-width: 100%; margin: 0 auto; } .navigation__item { flex: 0 0 auto; margin: 2px; } .btn, .navigation__item a { padding: 6px 10px; font-size: 0.7em; min-width: auto; white-space: nowrap; border-radius: 15px; letter-spacing: 0.3px; } /* 社交图标区域移动端优化 */ .social-icons-row { margin-top: 25px; padding: 0 10px; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 15px; } .social-icons-row .social-icon { margin: 0; flex: 0 0 auto; } .social-icons-row .social-icon a { font-size: 1.1em; padding: 8px; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); transition: all 0.3s ease; } .social-icons-row .social-icon a:hover { transform: scale(1.15) !important; background: rgba(255, 255, 255, 0.2) !important; box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3) !important; } .social-icons-row .social-icon svg { width: 18px; height: 18px; } } .social-icons-row .social-icon a { padding: 0; border: none !important; font-size: 1.2em; display: inline-block; background-color: transparent !important; width: auto; opacity: 0.85; transition: all 0.3s ease; transform: scale(1); } .social-icons-row .social-icon a:hover { opacity: 1; transform: scale(1.1); } .social-icons-row .social-icon a svg path { transition: fill 0.3s ease; } .social-icons-row .social-icon a[href*="github"]:hover svg path { fill: url(#github-gradient-hover) !important; } .social-icons-row .social-icon a[href*="linkedin"]:hover svg path { fill: url(#linkedin-gradient-hover) !important; } .social-icons-row .social-icon a[href*="twitter"]:hover svg path { fill: url(#twitter-gradient-hover) !important; } .social-icons-row .social-icon a.weixin-link:hover svg path { fill: url(#wechat-gradient-hover) !important; } .social-icons-row .social-icon a[href*="mailto"]:hover svg path { fill: url(#email-gradient-hover) !important; } /* 覆盖社交图标i元素的样式,移除小横杠黑点 */ .social-icons-row .social-icon i { position: static; display: inline-block; background: transparent !important; border: none !important; } /* 移除社交图标i元素的伪元素黑点,但保留图标显示 */ .social-icons-row .social-icon i::after { display: none !important; content: none !important; border: none !important; background: transparent !important; width: 0 !important; height: 0 !important; } /* 确保社交图标i元素的::before伪元素正确显示 */ .social-icons-row .social-icon i::before { position: static !important; border: none !important; background: transparent !important; top: auto !important; bottom: auto !important; left: auto !important; } .social-icons-row .social-icon i, .social-icons-row .social-icon svg { position: static; display: inline-block; transform: none !important; width: auto; height: auto; background: transparent !important; border: none !important; fill: currentColor; transition: all 0.3s ease; } .social-icons-row .social-icon .label { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .social-icons-row .social-icon a:hover { opacity: 1; transform: scale(1.1) !important; background: linear-gradient(135deg, #ff6b6b 0%, #4ecdc4 50%, #45b7d1 100%) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; letter-spacing: normal !important; box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3) !important; border-radius: 50% !important; } /* 隐藏社交导航文本名称 */ .social-icons-row .label { display: none !important; } /* 移除所有动画效果 */ /* 移除所有动画效果 */ @keyframes btnGroups { 0% { transform: scale(1); } 100% { transform: scale(1); } } /* 微信二维码模态框样式 */ .weixin-link { position: relative; } .weixin-qrcode-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: transparent; z-index: 10000; justify-content: center; align-items: flex-start; animation: fadeIn 0.3s ease; padding-top: 20px; /* 弹框贴近顶部,使用全透明背景 */ } .weixin-qrcode-container { background-color: #fff; padding: 20px; border-radius: 10px; text-align: center; max-width: 90%; width: 300px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); animation: zoomIn 0.3s ease; position: relative; margin: 0; } .weixin-qrcode-image { width: 100%; max-width: 250px; height: auto; margin: 15px 0; border: 5px solid #f8f8f8; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } .weixin-qrcode-title { font-size: 18px; font-weight: bold; color: #333; margin-bottom: 10px; } .weixin-qrcode-desc { font-size: 14px; color: #666; margin-bottom: 15px; } .weixin-qrcode-close { background-color: #f44336; color: white; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; font-size: 16px; transition: background-color 0.3s; margin-top: 10px; min-width: 100px; display: inline-block; } .weixin-qrcode-close:hover { background-color: #d32f2f; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes zoomIn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } } /* 移动端微信二维码优化 */ @media (max-width: 480px) { .weixin-qrcode-overlay { padding-top: 10px; } .weixin-qrcode-container { width: 280px; max-width: 90vw; padding: 15px; margin: 0 auto; } .weixin-qrcode-image { max-width: 200px; margin: 10px 0; } .weixin-qrcode-title { font-size: 16px; } .weixin-qrcode-desc { font-size: 13px; } .weixin-qrcode-close { padding: 10px 20px; font-size: 16px; margin-top: 10px; width: 100%; max-width: 150px; } } /* 横屏模式优化 */ @media screen and (max-height: 500px) and (orientation: landscape) { .navigation { padding: 5px; gap: 5px; } .navigation__item a { padding: 4px 8px; font-size: 0.7em; } .social-icons-row { margin-top: 15px; gap: 10px; } .social-icons-row .social-icon a { width: 32px; height: 32px; } .social-icons-row .social-icon svg { width: 14px; height: 14px; } } /* 以上已包含完整的微信二维码模态框样式 */ /* 旧的微信模态框样式已移除,使用新的weixin-qrcode-*类名 */ /* 页脚样式 */ .remark { position: absolute; bottom: 10px; left: 0; right: 0; text-align: center; padding: 5px; z-index: 1000; background-color: rgba(255, 255, 255, 0.0); } .power { display: inline-block; margin: 0 5px; font-size: 0.5em; color: rgba(255, 255, 255, 0.7); line-height: 1.2; } .power a { color: rgba(255, 255, 255, 0.8); font-size: 0.5em; text-decoration: none; transition: color 0.3s ease; } .power a:hover { color: #fff; text-decoration: underline; } /* 页脚单行显示 */ .remark .power:not(:last-child):after { content: "|"; margin-left: 8px; color: rgba(255, 255, 255, 0.5); color: rgba(255, 255, 255, 0.5); } /* navigation-wrapper 间距调整 */ .navigation-wrapper { margin-top: 40px; }