refactor: 重构浮动按钮组件样式
- 添加清晰的注释分区,提高代码可读性 - 移除冗余的空行和重复样式 - 统一样式属性顺序(定位 > 尺寸 > 外观 > 动画) - 简化选择器,移除不必要的 !important - 优化代码结构,相关样式集中管理 - 保持所有功能不变
This commit is contained in:
152
style.css
152
style.css
@@ -3115,13 +3115,15 @@ html.darkmode .wp-block-calendar tbody td {
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
/*浮动按钮栏 (回顶等)*/
|
/* ========================================
|
||||||
|
浮动按钮组件 (Float Action Buttons)
|
||||||
|
======================================== */
|
||||||
|
|
||||||
|
/* 容器样式 */
|
||||||
#float_action_buttons {
|
#float_action_buttons {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
bottom: 35px;
|
bottom: 35px;
|
||||||
right: 20px;
|
right: 20px;
|
||||||
height: max-content;
|
|
||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
transition:
|
transition:
|
||||||
opacity var(--animation-normal) var(--ease-standard),
|
opacity var(--animation-normal) var(--ease-standard),
|
||||||
@@ -3133,48 +3135,36 @@ html.darkmode .wp-block-calendar tbody td {
|
|||||||
right: auto;
|
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 {
|
html.is-home.banner-as-cover #float_action_buttons.hidden {
|
||||||
|
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 加载状态 */
|
||||||
.fabtns-unloaded {
|
.fabtns-unloaded {
|
||||||
transition: opacity var(--animation-normal) var(--ease-standard);
|
transition: opacity var(--animation-normal) var(--ease-standard);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 基础按钮样式 */
|
||||||
.fabtn {
|
.fabtn {
|
||||||
width: 42px;
|
width: 42px;
|
||||||
height: 42px;
|
height: 42px;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
overflow: hidden;
|
|
||||||
display: block !important;
|
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
|
display: block !important;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
border: none !important;
|
border: none !important;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: var(--color-foreground) !important;
|
||||||
|
color: var(--themecolor) !important;
|
||||||
transition:
|
transition:
|
||||||
background-color var(--animation-fast) var(--ease-standard),
|
background-color var(--animation-fast) var(--ease-standard),
|
||||||
color var(--animation-fast) var(--ease-standard),
|
color var(--animation-fast) var(--ease-standard),
|
||||||
transform var(--animation-fast) var(--ease-spring),
|
transform var(--animation-fast) var(--ease-spring),
|
||||||
box-shadow var(--animation-fast) var(--ease-standard),
|
box-shadow var(--animation-fast) var(--ease-standard),
|
||||||
opacity var(--animation-fast) var(--ease-standard);
|
opacity var(--animation-fast) var(--ease-standard);
|
||||||
background-color: var(--color-foreground) !important;
|
|
||||||
color: var(--themecolor) !important;
|
|
||||||
border-radius: 50%;
|
|
||||||
position: relative;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.fabtn:hover {
|
.fabtn:hover {
|
||||||
@@ -3194,42 +3184,41 @@ html.is-home.banner-as-cover #float_action_buttons.hidden {
|
|||||||
0 2px 6px rgba(var(--themecolor-rgbstr), 0.2) !important;
|
0 2px 6px rgba(var(--themecolor-rgbstr), 0.2) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 隐藏状态 */
|
||||||
.fabtn.fabtn-hidden {
|
.fabtn.fabtn-hidden {
|
||||||
height: 0 !important;
|
height: 0 !important;
|
||||||
opacity: 0;
|
opacity: 0 !important;
|
||||||
margin-top: 0;
|
margin-top: 0 !important;
|
||||||
box-shadow: none;
|
box-shadow: none !important;
|
||||||
pointer-events: none;
|
pointer-events: none !important;
|
||||||
transform: scale(0);
|
transform: scale(0) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 左右切换按钮 */
|
||||||
#fabtn_toggle_sides {
|
#fabtn_toggle_sides {
|
||||||
height: 42px !important;
|
|
||||||
transform: translateY(0px) scale(1) !important;
|
|
||||||
opacity: 1 !important;
|
opacity: 1 !important;
|
||||||
pointer-events: auto !important;
|
pointer-events: auto !important;
|
||||||
transition:
|
|
||||||
transform var(--animation-normal) var(--ease-emphasized-decelerate),
|
|
||||||
opacity var(--animation-normal) var(--ease-standard);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#float_action_buttons:hover #fabtn_toggle_sides {
|
#float_action_buttons:hover #fabtn_toggle_sides {
|
||||||
height: 42px !important;
|
transform: scale(1.05) !important;
|
||||||
transform: translateY(0px) scale(1.05) !important;
|
|
||||||
opacity: 1 !important;
|
|
||||||
pointer-events: auto !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_reading_progress {
|
#fabtn_reading_progress {
|
||||||
height: 42px;
|
|
||||||
overflow: visible;
|
overflow: visible;
|
||||||
position: relative;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#fabtn_reading_progress_bar {
|
#fabtn_reading_progress_bar {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
width: 0;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: var(--themecolor);
|
background: var(--themecolor);
|
||||||
@@ -3244,148 +3233,93 @@ html.is-home.banner-as-cover #float_action_buttons.hidden {
|
|||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
#float_action_buttons .fabtn:before {
|
/* 夜间模式按钮图标切换 */
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
#fabtn_toggle_darkmode i.fa {
|
#fabtn_toggle_darkmode i.fa {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
#fabtn_toggle_darkmode i.fa-lightbulb-o {
|
#fabtn_toggle_darkmode i.fa-lightbulb-o {
|
||||||
|
|
||||||
display: none;
|
display: none;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
html.darkmode #fabtn_toggle_darkmode i.fa-moon-o {
|
html.darkmode #fabtn_toggle_darkmode i.fa-moon-o {
|
||||||
|
|
||||||
display: none;
|
display: none;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
html.darkmode #fabtn_toggle_darkmode i.fa-lightbulb-o {
|
html.darkmode #fabtn_toggle_darkmode i.fa-lightbulb-o {
|
||||||
|
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 侧边栏打开按钮(移动端) */
|
||||||
#float_action_buttons #fabtn_open_sidebar {
|
#float_action_buttons #fabtn_open_sidebar {
|
||||||
|
|
||||||
display: none;
|
display: none;
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#sidebar_mask {
|
|
||||||
|
|
||||||
display: none;
|
|
||||||
|
|
||||||
opacity: 0;
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 设置弹窗 */
|
||||||
#fabtn_blog_settings_popup {
|
#fabtn_blog_settings_popup {
|
||||||
|
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|
||||||
right: 85px;
|
right: 85px;
|
||||||
|
|
||||||
bottom: 35px;
|
bottom: 35px;
|
||||||
|
|
||||||
padding: 16px 20px;
|
padding: 16px 20px;
|
||||||
|
|
||||||
opacity: 0;
|
|
||||||
|
|
||||||
width: max-content;
|
|
||||||
|
|
||||||
width: -moz-max-content;
|
|
||||||
|
|
||||||
min-width: 350px;
|
min-width: 350px;
|
||||||
|
|
||||||
max-width: calc(100vw - 170px);
|
max-width: calc(100vw - 170px);
|
||||||
|
|
||||||
max-height: calc(100vh - 70px);
|
max-height: calc(100vh - 70px);
|
||||||
|
opacity: 0;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
|
|
||||||
transform: translateX(10px) scale(0.95);
|
transform: translateX(10px) scale(0.95);
|
||||||
|
|
||||||
transition: all var(--animation-normal) var(--ease-emphasized);
|
transition: all var(--animation-normal) var(--ease-emphasized);
|
||||||
|
|
||||||
animation: none !important;
|
|
||||||
|
|
||||||
border-radius: 16px;
|
border-radius: 16px;
|
||||||
|
|
||||||
background: var(--color-foreground);
|
background: var(--color-foreground);
|
||||||
|
|
||||||
box-shadow:
|
box-shadow:
|
||||||
0 8px 32px rgba(0, 0, 0, 0.12),
|
0 8px 32px rgba(0, 0, 0, 0.12),
|
||||||
0 2px 8px rgba(0, 0, 0, 0.08);
|
0 2px 8px rgba(0, 0, 0, 0.08);
|
||||||
|
|
||||||
backdrop-filter: blur(20px);
|
backdrop-filter: blur(20px);
|
||||||
|
|
||||||
-webkit-backdrop-filter: blur(20px);
|
-webkit-backdrop-filter: blur(20px);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#float_action_buttons.fabtns-float-left #fabtn_blog_settings_popup {
|
#float_action_buttons.fabtns-float-left #fabtn_blog_settings_popup {
|
||||||
|
|
||||||
left: 85px;
|
left: 85px;
|
||||||
|
|
||||||
right: unset;
|
right: unset;
|
||||||
|
|
||||||
transform: translateX(-10px) scale(0.95);
|
transform: translateX(-10px) scale(0.95);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 设置弹窗打开状态 */
|
||||||
.blog_settings_opened #fabtn_blog_settings_popup {
|
.blog_settings_opened #fabtn_blog_settings_popup {
|
||||||
|
|
||||||
opacity: 1 !important;
|
opacity: 1 !important;
|
||||||
|
|
||||||
transform: none !important;
|
transform: none !important;
|
||||||
|
pointer-events: auto !important;
|
||||||
pointer-events: unset;
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.blog_settings_opened #fabtn_toggle_blog_settings_popup {
|
.blog_settings_opened #fabtn_toggle_blog_settings_popup {
|
||||||
|
|
||||||
opacity: 1 !important;
|
opacity: 1 !important;
|
||||||
|
|
||||||
color: #fff !important;
|
color: #fff !important;
|
||||||
|
|
||||||
background-color: var(--themecolor-dark2) !important;
|
background-color: var(--themecolor-dark2) !important;
|
||||||
|
pointer-events: auto !important;
|
||||||
pointer-events: unset !important;
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.blog_settings_opened .fabtn {
|
.blog_settings_opened .fabtn {
|
||||||
|
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
|
|
||||||
opacity: 0.25;
|
opacity: 0.25;
|
||||||
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.blog_settings_opened #fabtn_toggle_sides {
|
.blog_settings_opened #fabtn_toggle_sides {
|
||||||
|
|
||||||
opacity: 0 !important;
|
opacity: 0 !important;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#close_blog_settings {
|
#close_blog_settings {
|
||||||
|
|
||||||
text-align: right;
|
text-align: right;
|
||||||
|
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
|
|
||||||
margin-right: -12px;
|
margin-right: -12px;
|
||||||
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 暗色模式 */
|
||||||
|
html.darkmode .fabtn {
|
||||||
|
color: #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
html.darkmode .fabtn:hover {
|
||||||
|
background: var(--color-border-on-foreground-deeper) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.blog-setting-item {
|
.blog-setting-item {
|
||||||
|
|||||||
Reference in New Issue
Block a user