nanhaoluo/argon-theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 修复浮动按钮样式并优化动画效果

Browse Source 
- 修复 .fabtns-unloaded 初始隐藏状态被误删的问题
- 恢复 height: max-content 确保容器正确显示
- 恢复左右切换按钮的显示逻辑
- 优化按钮尺寸和间距 (44px, 10px gap)
- 增强 hover/active 动画效果 (弹性缩放、阴影)
- 优化暗色模式下的阴影效果
- 修复设置弹窗样式和动画
- 移除文件开头的错误文字
- 删除重复的暗色模式 fabtn 样式
This commit is contained in:
nanhaoluo
2026-01-12 18:47:01 +08:00
parent 83bb554778
commit 3b4e96c1ef
1 changed files with 111 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

172
style.css
View File

@@ -21,7 +21,6 @@ Tags: 简约, 两栏, 侧栏在左边, 浮动侧栏, 文章目录, 自适应,
@charset "utf-8";
float_action_buttons
:root {
@@ -3124,7 +3123,13 @@ html.darkmode .wp-block-calendar tbody td {
position: fixed;
bottom: 35px;
right: 20px;
height: max-content;
height: -moz-max-content;
z-index: 1000;
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
transition:
opacity var(--animation-normal) var(--ease-standard),
transform var(--animation-normal) var(--ease-standard);
@@ -3135,83 +3140,107 @@ html.darkmode .wp-block-calendar tbody td {
right: auto;
}
#float_action_buttons.fabtns-float-left .fabtn-show-on-right {
display: none;
}
#float_action_buttons:not(.fabtns-float-left) .fabtn-show-on-left {
display: none;
}
/* 首页横幅模式下隐藏 */
html.is-home.banner-as-cover #float_action_buttons.hidden {
opacity: 0;
pointer-events: none;
}
/* 加载状态 */
/* 加载状态 - 初始隐藏 */
.fabtns-unloaded {
opacity: 0;
pointer-events: none;
transition: opacity var(--animation-normal) var(--ease-standard);
}
/* 基础按钮样式 */
.fabtn {
width: 42px;
height: 42px;
width: 44px;
height: 44px;
padding: 0;
margin-top: 8px;
display: block !important;
margin-top: 10px;
display: flex !important;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
overflow: visible;
border: none !important;
border-radius: 50%;
background-color: var(--color-foreground) !important;
color: var(--themecolor) !important;
box-shadow:
0 2px 8px rgba(0, 0, 0, 0.08),
0 4px 16px rgba(0, 0, 0, 0.04);
cursor: pointer;
transition:
background-color var(--animation-fast) var(--ease-standard),
color var(--animation-fast) var(--ease-standard),
transform var(--animation-fast) var(--ease-spring),
box-shadow var(--animation-fast) var(--ease-standard),
opacity var(--animation-fast) var(--ease-standard);
transform var(--animation-normal) var(--ease-spring),
box-shadow var(--animation-normal) var(--ease-standard),
opacity var(--animation-fast) var(--ease-standard),
height var(--animation-normal) var(--ease-emphasized),
margin var(--animation-normal) var(--ease-emphasized);
}
.fabtn:first-child {
margin-top: 0;
}
.fabtn:hover {
color: #fff !important;
background-color: var(--themecolor) !important;
transform: translateY(-2px);
transform: translateY(-3px) scale(1.05);
box-shadow:
0 4px 12px rgba(var(--themecolor-rgbstr), 0.3),
0 8px 24px rgba(var(--themecolor-rgbstr), 0.2) !important;
0 6px 20px rgba(var(--themecolor-rgbstr), 0.35),
0 12px 28px rgba(var(--themecolor-rgbstr), 0.2) !important;
}
.fabtn:active {
color: #fff !important;
background-color: var(--themecolor-dark) !important;
transform: translateY(0px) scale(0.95);
transform: translateY(-1px) scale(0.98);
box-shadow:
0 2px 6px rgba(var(--themecolor-rgbstr), 0.2) !important;
0 2px 8px rgba(var(--themecolor-rgbstr), 0.25) !important;
}
/* 隐藏状态 */
.fabtn.fabtn-hidden {
height: 0 !important;
width: 0 !important;
opacity: 0 !important;
margin-top: 0 !important;
margin: 0 !important;
padding: 0 !important;
box-shadow: none !important;
pointer-events: none !important;
transform: scale(0) !important;
overflow: hidden !important;
}
/* 左右切换按钮 */
/* 左右切换按钮 - 始终显示 */
#fabtn_toggle_sides {
opacity: 1 !important;
pointer-events: auto !important;
width: 36px;
height: 36px;
opacity: 0.7;
font-size: 12px;
}
#float_action_buttons:hover #fabtn_toggle_sides {
transform: scale(1.05) !important;
}
#float_action_buttons.fabtns-float-left .fabtn-show-on-right,
#float_action_buttons:not(.fabtns-float-left) .fabtn-show-on-left {
display: none;
#fabtn_toggle_sides:hover {
opacity: 1;
}
/* 阅读进度按钮 */
#fabtn_reading_progress {
overflow: visible;
font-size: 11px;
font-weight: 600;
}
#fabtn_reading_progress_bar {
@@ -3222,20 +3251,20 @@ html.is-home.banner-as-cover #float_action_buttons.hidden {
height: 100%;
border-radius: 50%;
background: var(--themecolor);
opacity: 0.15;
opacity: 0.12;
transition: width var(--animation-fast) var(--ease-standard);
pointer-events: none;
}
#fabtn_reading_progress_details {
position: relative;
z-index: 1;
font-size: 11px;
font-weight: 600;
}
/* 夜间模式按钮图标切换 */
#fabtn_toggle_darkmode i.fa {
margin: 0;
font-size: 16px;
}
#fabtn_toggle_darkmode i.fa-lightbulb-o {
@@ -3250,37 +3279,59 @@ html.darkmode #fabtn_toggle_darkmode i.fa-lightbulb-o {
display: inline-block;
}
/* 回到顶部按钮 */
#fabtn_back_to_top i {
font-size: 16px;
}
/* 跳转评论按钮 */
#fabtn_go_to_comment i {
font-size: 15px;
}
/* 侧边栏打开按钮（移动端） */
#float_action_buttons #fabtn_open_sidebar {
display: none;
}
/* 侧边栏遮罩 */
#sidebar_mask {
display: none;
opacity: 0;
}
/* 设置弹窗 */
#fabtn_blog_settings_popup {
position: fixed;
right: 85px;
bottom: 35px;
padding: 16px 20px;
padding: 20px 24px;
width: max-content;
width: -moz-max-content;
min-width: 350px;
max-width: calc(100vw - 170px);
max-height: calc(100vh - 70px);
opacity: 0;
pointer-events: none;
transform: translateX(10px) scale(0.95);
transition: all var(--animation-normal) var(--ease-emphasized);
border-radius: 16px;
transform: translateX(12px) scale(0.96);
transition:
opacity var(--animation-normal) var(--ease-emphasized),
transform var(--animation-normal) var(--ease-emphasized);
animation: none !important;
border-radius: 20px;
background: var(--color-foreground);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.12),
0 2px 8px rgba(0, 0, 0, 0.08);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
0 12px 40px rgba(0, 0, 0, 0.15),
0 4px 12px rgba(0, 0, 0, 0.08);
backdrop-filter: blur(24px) saturate(180%);
-webkit-backdrop-filter: blur(24px) saturate(180%);
overflow-y: auto;
}
#float_action_buttons.fabtns-float-left #fabtn_blog_settings_popup {
left: 85px;
right: unset;
transform: translateX(-10px) scale(0.95);
transform: translateX(-12px) scale(0.96);
}
/* 设置弹窗打开状态 */
@@ -3293,13 +3344,14 @@ html.darkmode #fabtn_toggle_darkmode i.fa-lightbulb-o {
.blog_settings_opened #fabtn_toggle_blog_settings_popup {
opacity: 1 !important;
color: #fff !important;
background-color: var(--themecolor-dark2) !important;
background-color: var(--themecolor) !important;
pointer-events: auto !important;
transform: scale(1.05);
}
.blog_settings_opened .fabtn {
pointer-events: none;
opacity: 0.25;
opacity: 0.3;
}
.blog_settings_opened #fabtn_toggle_sides {
@@ -3311,34 +3363,41 @@ html.darkmode #fabtn_toggle_darkmode i.fa-lightbulb-o {
font-size: 12px;
margin-right: -12px;
cursor: pointer;
opacity: 0.6;
transition: opacity var(--animation-fast) var(--ease-standard);
}
/* 暗色模式 */
#close_blog_settings:hover {
opacity: 1;
}
/* 暗色模式浮动按钮 */
html.darkmode .fabtn {
color: #eee;
color: #ddd;
box-shadow:
0 2px 8px rgba(0, 0, 0, 0.2),
0 4px 16px rgba(0, 0, 0, 0.15);
}
html.darkmode .fabtn:hover {
color: #fff !important;
background-color: var(--themecolor) !important;
box-shadow:
0 6px 20px rgba(var(--themecolor-rgbstr), 0.4),
0 12px 28px rgba(0, 0, 0, 0.3) !important;
}
/* 侧边栏遮罩 */
#sidebar_mask {
display: none;
opacity: 0;
html.darkmode #fabtn_blog_settings_popup {
box-shadow:
0 12px 40px rgba(0, 0, 0, 0.4),
0 4px 12px rgba(0, 0, 0, 0.25);
}
.blog-setting-item {
display: flex;
flex-flow: row;
align-items: center;
padding: 8px 0;
padding: 10px 0;
}
/* 设置面板标题样式 */
@@ -9944,15 +10003,6 @@ html.darkmode .close > span:not(.sr-only) {
html.darkmode .fabtn {
color: #eee;
}
html.darkmode .fabtn:hover {
color: #fff !important;
background-color: var(--themecolor) !important;
}
html.darkmode .tag.badge {
color: #eee;