feat: 统一桌面端和移动端分享按钮动画
- 移除移动端弹窗式布局 - 所有设备统一使用上滑下滑动画逻辑 - 点击分享按钮:按钮上滑淡出,分享渠道从下方滑入 - 点击空白区域:分享渠道下滑淡出,按钮从上方滑回 - 保留移动端tooltip隐藏和二维码左侧显示
This commit is contained in:
37
style.css
37
style.css
@@ -8361,43 +8361,6 @@ body.noscroll:before {
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
/* 移动端适配 */
|
||||
@media (max-width: 576px) {
|
||||
#share {
|
||||
position: fixed;
|
||||
bottom: 80px;
|
||||
right: 16px;
|
||||
left: auto;
|
||||
top: auto;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding: 10px;
|
||||
background: var(--color-foreground);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
|
||||
transform: translateY(20px);
|
||||
}
|
||||
|
||||
#share_container.opened #share {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* 移动端分享按钮旋转而不是消失 */
|
||||
#share_container.opened #share_show {
|
||||
transform: rotate(45deg);
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* 夜间模式 */
|
||||
@media (max-width: 576px) {
|
||||
html.darkmode #share {
|
||||
background: var(--color-foreground);
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
#share .icon-wechat,
|
||||
#share .icon-copy-link {
|
||||
position: relative;
|
||||
|
||||
Reference in New Issue
Block a user