#rightside position: fixed right: -2.5rem bottom: 20px z-index: 1000 opacity: 0 transition: all .5s cubic-bezier(0.4, 0, 0.2, 1) filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.15)) &.needEndHide display block !important &.hide.needEndHide bottom 0 !important transform: none !important button display: block margin-bottom: 8px width: 2rem height: 2rem border-radius: 50% background: var(--efu-card-bg) color: var(--font-color) text-align: center font-size: 16px border: 1px solid var(--border-color) cursor: pointer position: relative overflow: hidden transition: all .3s cubic-bezier(0.4, 0, 0.2, 1) backdrop-filter: blur(10px) saturate(180%) box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.1) // 悬停效果 &:hover transform: translateY(-2px) scale(1.05) box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15), 0 2px 6px rgba(0, 0, 0, 0.1) background: var(--btn-hover-bg, var(--card-bg)) border-color: var(--theme-color) color: var(--theme-color) &::before transform: scale(1) opacity: 0.1 // 按下效果 &:active transform: translateY(0) scale(0.95) transition: all .1s // 涟漪效果 &::before content: '' position: absolute top: 50% left: 50% width: 0 height: 0 background: currentColor border-radius: 50% transform: translate(-50%, -50%) scale(0) transition: transform .3s, opacity .3s opacity: 0 pointer-events: none // 图标样式优化 i position: relative z-index: 1 transition: all .3s ease // PC端显示 &.pc display: block +maxWidth1200() display: none // 移动端显示 &.mobile display: none +maxWidth1200() display: block // 返回顶部按钮特殊样式 &.top background: linear-gradient(135deg, var(--efu-card-bg), var(--theme-color-alpha-10)) border: 1px solid var(--theme-color-alpha-20) &:hover background: linear-gradient(135deg, var(--theme-color-alpha-10), var(--theme-color-alpha-20)) border-color: var(--theme-color) color: var(--theme-color) #percent display: none i display: block transition: all .3s ease transform: scale(1.2) rotate(-5deg) i transition: all .3s ease display: none &.show display: block #percent font-size: 12px font-weight: 600 line-height: 1 // 评论按钮 &.comment &:hover animation: pulse 1.5s infinite // 弹幕按钮 &.barrage span font-size: 12px font-weight: 500 // 配置按钮 &.config &:hover i animation: spin 2s linear infinite // 隐藏面板优化 .rs_hide position: absolute right: 0 bottom: 100% margin-bottom: 8px transform: translate(60px, 0) transition: all .4s cubic-bezier(0.4, 0, 0.2, 1) opacity: 0 filter: blur(2px) pointer-events: none display: flex flex-direction: column-reverse &.show opacity: 1 transform: translate(0, 0) filter: blur(0) pointer-events: auto button display: block margin-top: 8px margin-bottom: 0 width: 2rem height: 2rem border-radius: 50% background: var(--efu-card-bg) color: var(--font-color) border: 1px solid var(--border-color) cursor: pointer transition: all .3s cubic-bezier(0.4, 0, 0.2, 1) backdrop-filter: blur(10px) saturate(180%) box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.1) &:hover transform: translateY(-2px) scale(1.05) box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15), 0 2px 6px rgba(0, 0, 0, 0.1) background: var(--btn-hover-bg, var(--efu-card-bg)) border-color: var(--theme-color) color: var(--theme-color) &:active transform: translateY(0) scale(0.95) transition: all .1s // 翻译按钮特殊样式 &.translate font-weight: 600 font-size: 14px &:hover color: var(--theme-color) background: var(--theme-color-alpha-10) // 深色模式切换按钮 &.mode &:hover i animation: rotate-y 0.6s ease-in-out // 侧边栏切换按钮 &.aside &:hover i animation: expand 0.6s ease-in-out // 键盘快捷键按钮 &.keyboard &:hover i animation: bounce 0.6s ease-in-out i position: relative z-index: 1 transition: all .3s ease // 动画定义 @keyframes pulse 0%, 100% box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) 50% box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) @keyframes spin from transform: rotate(0deg) to transform: rotate(360deg) @keyframes rotate-y 0% transform: rotateY(0deg) 50% transform: rotateY(180deg) 100% transform: rotateY(360deg) @keyframes expand 0%, 100% transform: scaleX(1) 50% transform: scaleX(1.3) @keyframes bounce 0%, 20%, 50%, 80%, 100% transform: translateY(0) 40% transform: translateY(-3px) 60% transform: translateY(-1px) // 响应式优化 +maxWidth768() #rightside right: -2.5rem bottom: 15px button width: 2rem height: 2rem margin-bottom: 6px font-size: 14px .rs_hide button width: 2rem height: 2rem // 暗色模式优化 [data-theme='dark'] #rightside filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4)) button background: var(--efu-card-bg) opacity: 0.9 border-color: rgba(255, 255, 255, 0.1) box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1) &:hover background: var(--efu-card-bg) opacity: 1 border-color: var(--theme-color) box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3), 0 2px 6px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2) &.top background: linear-gradient(135deg, var(--efu-card-bg), var(--theme-color-alpha-10)) border-color: var(--theme-color-alpha-30) opacity: 0.9 &:hover background: linear-gradient(135deg, var(--theme-color-alpha-15), var(--theme-color-alpha-25)) border-color: var(--theme-color) opacity: 1 .rs_hide button background: var(--efu-card-bg) opacity: 0.9 border-color: rgba(255, 255, 255, 0.1) box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1) &:hover background: var(--efu-card-bg) opacity: 1 border-color: var(--theme-color) box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3), 0 2px 6px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2)