@keyframes heart { 0%, 40%, 80%, to { transform: scale(1) } 20%, 60% { transform: scale(1.15) } } @keyframes new { 0%, to { transform: scale(1) rotate(0deg) } 50% { transform: scale(1.15) rotate(10deg) } } .md-typeset .twitter { color: #eee } .md-typeset .mastodon { color: #897ff8 } .md-typeset .mdx-video { width: auto } .md-typeset .mdx-video__inner { height: 0; padding-bottom: 56.138%; position: relative; width: 100% } .md-typeset .mdx-video iframe { border: none; height: 100%; left: 0; overflow: hidden; position: absolute; top: 0; width: 100% } .md-typeset .mdx-heart { animation: heart 1s infinite } .md-typeset .mdx-pulse { animation: new 2s infinite } .md-typeset .mdx-pulse svg { fill: var(--md-accent-fg-color) } .md-typeset .mdx-insiders { color: #e91e63 } .md-typeset .mdx-badge { font-size: .85em } .md-typeset .mdx-badge--heart { --md-typeset-a-color: #e92063; --md-accent-fg-color: #ff4281; --md-accent-fg-color--transparent: #e920631a } .md-typeset .mdx-badge--heart .twemoji { animation: heart 1s infinite } .md-typeset .mdx-badge--right { float: right; margin-left: .35em } [dir=ltr] .md-typeset .mdx-badge__icon { border-top-left-radius: .1rem } [dir=rtl] .md-typeset .mdx-badge__icon { border-top-right-radius: .1rem } [dir=ltr] .md-typeset .mdx-badge__icon { border-bottom-left-radius: .1rem } [dir=rtl] .md-typeset .mdx-badge__icon { border-bottom-right-radius: .1rem } .md-typeset .mdx-badge__icon { background: var(--md-accent-fg-color--transparent); padding: .2rem } .md-typeset .mdx-badge__icon:last-child { border-radius: .1rem } [dir=ltr] .md-typeset .mdx-badge__text { border-top-right-radius: .1rem } [dir=rtl] .md-typeset .mdx-badge__text { border-top-left-radius: .1rem } [dir=ltr] .md-typeset .mdx-badge__text { border-bottom-right-radius: .1rem } [dir=rtl] .md-typeset .mdx-badge__text { border-bottom-left-radius: .1rem } .md-typeset .mdx-badge__text { box-shadow: 0 0 0 1px inset var(--md-accent-fg-color--transparent); padding: .2rem .3rem } .md-typeset .mdx-switch button { cursor: pointer; transition: opacity .25s } .md-typeset .mdx-switch button:focus, .md-typeset .mdx-switch button:hover { opacity: .75 } .md-typeset .mdx-switch button>code { background-color: var(--md-primary-fg-color); color: var(--md-primary-bg-color); display: block } .md-typeset .mdx-columns ol, .md-typeset .mdx-columns ul { -moz-columns: 2; columns: 2; column-count: 2 } @media screen and (max-width:29.984375em) { .md-typeset .mdx-columns ol, .md-typeset .mdx-columns ul { -moz-columns: initial; columns: initial } } .md-typeset .mdx-columns li { -moz-column-break-inside: avoid; break-inside: avoid } .md-typeset .mdx-flags { margin: 2em auto } .md-typeset .mdx-flags ol { list-style: none } .md-typeset .mdx-flags ol li { margin-bottom: 1em } .md-typeset .mdx-flags__item { display: flex; gap: .6rem } .md-typeset .mdx-flags__content { display: flex; flex: 1; flex-direction: column } .md-typeset .mdx-flags__content span { align-items: baseline; display: inline-flex; justify-content: space-between } .md-typeset .mdx-flags__content>span:nth-child(2) { font-size: 80% } .md-typeset .mdx-flags__content code { float: right } .md-typeset .mdx-social { height: min(27rem, 80vw); position: relative } .md-typeset .mdx-social:hover .mdx-social__image { background-color: #e4e4e40d } .md-typeset .mdx-social__layer { margin-top: 4rem; position: absolute; transform-style: preserve-3d; transition: .25s cubic-bezier(.7, 0, .3, 1) } .md-typeset .mdx-social__layer:hover .mdx-social__label { opacity: 1 } .md-typeset .mdx-social__layer:hover .mdx-social__image { background-color: #7f7f7ffc } .md-typeset .mdx-social__layer:hover~.mdx-social__layer { opacity: 0 } .md-typeset .mdx-social__image { box-shadow: -.25rem .25rem .5rem #0000000d; transform: rotate(-40deg) skew(15deg, 15deg) scale(.7); transition: all .25s } .md-typeset .mdx-social__image img { display: block } .md-typeset .mdx-social__label { background-color: var(--md-default-fg-color--light); color: var(--md-default-bg-color); display: block; opacity: 0; padding: .2rem .4rem; position: absolute; transition: all .25s } .md-typeset .mdx-social:hover .mdx-social__layer:nth-child(6) { transform: translateY(-30px) } .md-typeset .mdx-social:hover .mdx-social__layer:nth-child(5) { transform: translateY(-20px) } .md-typeset .mdx-social:hover .mdx-social__layer:nth-child(4) { transform: translateY(-10px) } .md-typeset .mdx-social:hover .mdx-social__layer:nth-child(3) { transform: translateY(0) } .md-typeset .mdx-social:hover .mdx-social__layer:nth-child(2) { transform: translateY(10px) } .md-typeset .mdx-social:hover .mdx-social__layer:first-child { transform: translateY(20px) } .md-typeset .mdx-social:hover .mdx-social__layer:nth-child(0) { transform: translateY(30px) } .md-banner { color: var(--md-footer-fg-color--lighter) } .md-banner strong { white-space: nowrap } .md-banner a, .md-banner a:focus, .md-banner a:hover, .md-banner strong { color: var(--md-footer-fg-color) } .md-banner a:focus strong, .md-banner a:hover strong { text-decoration: underline; text-underline-offset: 2px } .md-banner a:focus .twemoji, .md-banner a:hover .twemoji { background-color: var(--md-footer-bg-color); box-shadow: none } .md-banner .twemoji { border-radius: 100%; box-shadow: inset 0 0 0 .05rem currentcolor; display: inline-block; height: 1.2rem; padding: .25rem; transition: all .25s; vertical-align: bottom; width: 1.2rem } .md-banner .twemoji svg { display: block; max-height: none } .md-typeset .mdx-iconsearch { background-color: var(--md-default-bg-color); border-radius: .1rem; box-shadow: var(--md-shadow-z1); position: relative; transition: box-shadow 125ms } .md-typeset .mdx-iconsearch:focus-within, .md-typeset .mdx-iconsearch:hover { box-shadow: var(--md-shadow-z2) } .md-typeset .mdx-iconsearch .md-input { background: var(--md-default-bg-color); box-shadow: none } [data-md-color-scheme=slate] .md-typeset .mdx-iconsearch .md-input { background: var(--md-code-bg-color) } .md-typeset .mdx-iconsearch-result { -webkit-backface-visibility: hidden; backface-visibility: hidden; max-height: 50vh; overflow-y: auto; scrollbar-color: var(--md-default-fg-color--lighter) #0000; scrollbar-width: thin; touch-action: pan-y } .md-tooltip .md-typeset .mdx-iconsearch-result { max-height: 10.25rem } .md-typeset .mdx-iconsearch-result::-webkit-scrollbar { height: .2rem; width: .2rem } .md-typeset .mdx-iconsearch-result::-webkit-scrollbar-thumb { background-color: var(--md-default-fg-color--lighter) } .md-typeset .mdx-iconsearch-result::-webkit-scrollbar-thumb:hover { background-color: var(--md-accent-fg-color) } .md-typeset .mdx-iconsearch-result__meta { color: var(--md-default-fg-color--lighter); font-size: .64rem; position: absolute; right: .6rem; top: .4rem } [dir=ltr] .md-typeset .mdx-iconsearch-result__list { margin-left: 0 } [dir=rtl] .md-typeset .mdx-iconsearch-result__list { margin-right: 0 } .md-typeset .mdx-iconsearch-result__list { list-style: none; margin: 0; padding: 0 } [dir=ltr] .md-typeset .mdx-iconsearch-result__item { margin-left: 0 } [dir=rtl] .md-typeset .mdx-iconsearch-result__item { margin-right: 0 } .md-typeset .mdx-iconsearch-result__item { border-bottom: .05rem solid var(--md-default-fg-color--lightest); margin: 0; padding: .2rem .6rem } .md-typeset .mdx-iconsearch-result__item:last-child { border-bottom: none } .md-typeset .mdx-iconsearch-result__item>* { margin-right: .6rem } .md-typeset .mdx-iconsearch-result__item img { height: .9rem; width: .9rem } [data-md-color-scheme=slate] .md-typeset .mdx-iconsearch-result__item img[src*=squidfunk] { filter: invert(1) } .md-typeset .mdx-premium p { margin: 2em 0; text-align: center } .md-typeset .mdx-premium img { height: 3.25rem } .md-typeset .mdx-premium p:last-child { display: flex; flex-wrap: wrap; justify-content: center } .md-typeset .mdx-premium p:last-child>a { display: block; flex-shrink: 0 } .md-typeset .mdx-sponsorship__list { margin: 2em 0 } .md-typeset .mdx-sponsorship__list:after { clear: both; content: ""; display: block } [dir=ltr] .md-typeset .mdx-sponsorship__item { float: left } [dir=rtl] .md-typeset .mdx-sponsorship__item { float: right } .md-typeset .mdx-sponsorship__item { border-radius: 100%; display: block; height: 1.6rem; margin: .2rem; overflow: hidden; transform: scale(1); transition: color 125ms, transform 125ms; width: 1.6rem } .md-typeset .mdx-sponsorship__item:focus, .md-typeset .mdx-sponsorship__item:hover { transform: scale(1.1) } .md-typeset .mdx-sponsorship__item:focus img, .md-typeset .mdx-sponsorship__item:hover img { filter: grayscale(0) } .md-typeset .mdx-sponsorship__item--private { background: var(--md-default-fg-color--lightest); color: var(--md-default-fg-color--lighter); font-size: .6rem; font-weight: 700; line-height: 1.6rem; text-align: center } .md-typeset .mdx-sponsorship__item img { display: block; filter: grayscale(100%) opacity(75%); height: auto; transition: filter 125ms; width: 100% } .md-typeset .mdx-sponsorship-button { font-weight: 400 } .md-typeset .mdx-sponsorship-count, .md-typeset .mdx-sponsorship-total { font-weight: 700 } /* 现代化页脚样式 - 确保不影响其他页面元素 */ .neo-footer { position: relative; background: linear-gradient(180deg, #0f172a, #1e293b); color: #e2e8f0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; overflow: hidden; padding: 5rem 0 2rem; z-index: 5; isolation: isolate; } /* 背景装饰 */ .neo-footer-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: -1; } .bg-circle { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.6; animation: float 10s infinite ease-in-out; } .circle-1 { background: linear-gradient(135deg, #4f46e5, #7c3aed); width: 25rem; height: 25rem; top: -15rem; right: -5rem; animation-delay: 0s; } .circle-2 { background: linear-gradient(135deg, #06b6d4, #3b82f6); width: 20rem; height: 20rem; bottom: -10rem; left: -5rem; animation-delay: -2s; } .circle-3 { background: linear-gradient(135deg, #f97316, #db2777); width: 15rem; height: 15rem; top: 40%; left: 30%; animation-delay: -5s; } .bg-blur { position: absolute; top: 0; left: 0; width: 100%; height: 100%; backdrop-filter: blur(100px); -webkit-backdrop-filter: blur(100px); background: rgba(15, 23, 42, 0.7); } @keyframes float { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-20px) scale(1.05); } } /* 容器 */ .neo-footer-container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; position: relative; z-index: 2; display: flex; flex-direction: column; gap: 4rem; } /* 顶部Logo部分 */ .neo-footer-logo { text-align: center; position: relative; margin-bottom: 1rem; } .neo-footer-logo h2 { font-size: 2.5rem; font-weight: 700; background: linear-gradient(135deg, #60a5fa, #a78bfa, #f472b6); -webkit-background-clip: text; background-clip: text; color: transparent; margin: 0 0 0.5rem; position: relative; z-index: 1; } .neo-footer-logo p { color: #94a3b8; font-size: 1.1rem; max-width: 500px; margin: 0 auto; } .logo-glow { position: absolute; width: 150px; height: 150px; background: rgba(99, 102, 241, 0.4); border-radius: 50%; filter: blur(40px); z-index: 0; top: 50%; left: 50%; transform: translate(-50%, -80%); } /* 中间链接部分 */ .neo-footer-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 3rem; } .neo-footer-section h3 { font-size: 1.1rem; font-weight: 600; color: #f8fafc; margin-bottom: 1.5rem; position: relative; display: inline-block; } .neo-footer-section h3::after { content: ''; position: absolute; left: 0; bottom: -0.5rem; width: 2rem; height: 0.2rem; background: linear-gradient(90deg, #4f46e5, transparent); border-radius: 1rem; } .neo-footer-section ul { list-style: none; padding: 0; margin: 0; } .neo-footer-section li { margin-bottom: 0.8rem; } .neo-footer-section a { color: #cbd5e1; text-decoration: none; font-size: 0.95rem; display: inline-flex; align-items: center; transition: all 0.3s ease; position: relative; } .neo-footer-section a::before { content: ''; position: absolute; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: linear-gradient(135deg, #4f46e5, #7c3aed); left: -1rem; opacity: 0; transition: all 0.3s ease; } .neo-footer-section a:hover { color: #f8fafc; transform: translateX(0.5rem); } .neo-footer-section a:hover::before { opacity: 1; left: -0.8rem; } /* 底部社交和版权 */ .neo-footer-bottom { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; padding-top: 2rem; position: relative; } .neo-footer-bottom::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 80%; height: 1px; background: linear-gradient(90deg, transparent, rgba(203, 213, 225, 0.1), transparent); } .neo-social-icons { display: flex; gap: 1rem; } .social-icon { display: flex; align-items: center; justify-content: center; width: 2.8rem; height: 2.8rem; border-radius: 50%; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #f8fafc; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); } .social-icon::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(79, 70, 229, 0.8), rgba(124, 58, 237, 0.8)); opacity: 0; transition: opacity 0.3s ease; } .social-icon:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(79, 70, 229, 0.3); } .social-icon:hover::before { opacity: 1; } .social-icon svg { width: 1.4rem; height: 1.4rem; position: relative; z-index: 2; fill: currentColor; } .neo-copyright { text-align: center; color: #94a3b8; font-size: 0.9rem; line-height: 1.5; } .copyright-text { margin-bottom: 0.5rem; } .beian-info { margin-bottom: 0.5rem; font-size: 0.85rem; } .beian-info a { color: #a5b4fc; text-decoration: none; transition: color 0.2s ease; font-weight: 500; } .beian-info a:hover { color: #818cf8; } .powered-by { font-size: 0.85rem; } .powered-by a { color: #a5b4fc; text-decoration: none; transition: color 0.2s ease; font-weight: 500; } .powered-by a:hover { color: #818cf8; } .heart { color: #ec4899; display: inline-block; animation: heartbeat 1.5s infinite ease-in-out; } @keyframes heartbeat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.2); } 30% { transform: scale(1); } 45% { transform: scale(1.3); } } /* 响应式调整 */ @media (max-width: 768px) { .neo-footer { padding: 4rem 0 2rem; } .neo-footer-container { gap: 3rem; } .neo-footer-links { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 2rem; } .neo-footer-logo h2 { font-size: 2rem; } } @media (min-width: 768px) { .neo-footer-bottom { flex-direction: row; justify-content: space-between; } .neo-copyright { text-align: right; } }