325 lines
8.4 KiB
CSS
325 lines
8.4 KiB
CSS
/* css/unified-button-sizes.css */
|
||
/* 统一的按钮尺寸系统 - 针对TOC、Chatbot等浮动按钮 */
|
||
|
||
/* 重新定义按钮尺寸变量 - 调整为更合适的大小 */
|
||
:root {
|
||
/* 桌面端按钮尺寸（适中尺寸，不会太小） */
|
||
--btn-small-size: 40px; /* TOC按钮等 */
|
||
--btn-medium-size: 44px; /* Chatbot等 */
|
||
--btn-large-size: 42px; /* 沉浸式按钮等，从48px调整为42px */
|
||
|
||
/* 移动端按钮尺寸（适度缩小但保持可用性） */
|
||
--btn-small-mobile: 36px; /* 原来28px */
|
||
--btn-medium-mobile: 40px; /* 原来32px */
|
||
--btn-large-mobile: 44px; /* 原来36px */
|
||
|
||
/* 对应的图标尺寸 */
|
||
--btn-icon-small: 18px;
|
||
--btn-icon-medium: 20px;
|
||
--btn-icon-large: 19px; /* 从22px调整为19px */
|
||
|
||
/* 移动端图标尺寸 */
|
||
--btn-icon-small-mobile: 16px;
|
||
--btn-icon-medium-mobile: 18px;
|
||
--btn-icon-large-mobile: 18px; /* 从20px调整为18px */
|
||
}
|
||
|
||
/* 更新现有的按钮类 */
|
||
.tiny-round-btn {
|
||
border-radius: 50% !important;
|
||
background-color: #2563eb !important;
|
||
color: white !important;
|
||
display: flex !important;
|
||
align-items: center !important;
|
||
justify-content: center !important;
|
||
box-shadow: 0 2px 8px rgba(59,130,246,0.15) !important;
|
||
border: none !important;
|
||
cursor: pointer !important;
|
||
padding: 0 !important;
|
||
transition: background-color 0.2s, transform 0.2s !important;
|
||
|
||
/* 使用新的尺寸变量 */
|
||
width: var(--btn-small-size) !important;
|
||
height: var(--btn-small-size) !important;
|
||
font-size: var(--btn-icon-small) !important;
|
||
}
|
||
|
||
.tiny-round-btn:hover {
|
||
background-color: #1d4ed8 !important;
|
||
transform: scale(1.08);
|
||
}
|
||
|
||
.medium-round-btn {
|
||
border-radius: 50% !important;
|
||
background-color: #2563eb !important;
|
||
color: white !important;
|
||
display: flex !important;
|
||
align-items: center !important;
|
||
justify-content: center !important;
|
||
box-shadow: 0 2px 8px rgba(59,130,246,0.15) !important;
|
||
border: none !important;
|
||
cursor: pointer !important;
|
||
padding: 0 !important;
|
||
transition: background-color 0.2s, transform 0.2s !important;
|
||
|
||
width: var(--btn-medium-size) !important;
|
||
height: var(--btn-medium-size) !important;
|
||
font-size: var(--btn-icon-medium) !important;
|
||
}
|
||
|
||
.medium-round-btn:hover {
|
||
background-color: #1d4ed8 !important;
|
||
transform: scale(1.08);
|
||
}
|
||
|
||
/* 更新big-round-btn为large-round-btn */
|
||
.big-round-btn,
|
||
.large-round-btn {
|
||
border-radius: 50% !important;
|
||
background-color: #2563eb !important;
|
||
color: white !important;
|
||
display: flex !important;
|
||
align-items: center !important;
|
||
justify-content: center !important;
|
||
box-shadow: 0 2px 8px rgba(59,130,246,0.15) !important;
|
||
border: none !important;
|
||
cursor: pointer !important;
|
||
padding: 0 !important;
|
||
transition: background-color 0.2s, transform 0.2s !important;
|
||
|
||
width: var(--btn-large-size) !important;
|
||
height: var(--btn-large-size) !important;
|
||
font-size: var(--btn-icon-large) !important;
|
||
}
|
||
|
||
.big-round-btn:hover,
|
||
.large-round-btn:hover {
|
||
background-color: #1d4ed8 !important;
|
||
transform: scale(1.08);
|
||
}
|
||
|
||
/* 确保图标正确继承尺寸 */
|
||
.tiny-round-btn > i,
|
||
.medium-round-btn > i,
|
||
.big-round-btn > i,
|
||
.large-round-btn > i {
|
||
font-size: inherit !important;
|
||
line-height: 1 !important;
|
||
padding: 0 !important;
|
||
}
|
||
|
||
/* 沉浸式布局按钮也使用统一尺寸 */
|
||
#toggle-immersive-btn {
|
||
width: var(--btn-large-size) !important;
|
||
height: var(--btn-large-size) !important;
|
||
font-size: var(--btn-icon-large) !important;
|
||
}
|
||
|
||
/* Chatbot FAB 统一尺寸（如果存在） */
|
||
#chatbot-fab {
|
||
width: var(--btn-medium-size) !important;
|
||
height: var(--btn-medium-size) !important;
|
||
font-size: var(--btn-icon-medium) !important;
|
||
}
|
||
|
||
/* Chatbot FAB按钮样式 - 使用类选择器覆盖内联样式 */
|
||
.chatbot-fab-button {
|
||
width: var(--btn-medium-size) !important;
|
||
height: var(--btn-medium-size) !important;
|
||
border: none !important;
|
||
outline: none !important;
|
||
background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
|
||
border-radius: 50% !important;
|
||
display: flex !important;
|
||
align-items: center !important;
|
||
justify-content: center !important;
|
||
cursor: pointer !important;
|
||
transform: scale(1) !important;
|
||
transition: transform 0.2s !important;
|
||
color: white !important;
|
||
box-shadow: 0 2px 8px rgba(59,130,246,0.15) !important;
|
||
}
|
||
|
||
.chatbot-fab-button i {
|
||
font-size: var(--btn-icon-medium) !important;
|
||
line-height: 1 !important;
|
||
}
|
||
|
||
.chatbot-fab-button:hover {
|
||
background: linear-gradient(135deg, #2563eb, #1e40af) !important;
|
||
}
|
||
|
||
/* 平板设备优化 (768px - 1024px) */
|
||
@media (max-width: 1024px) and (min-width: 769px) {
|
||
.tiny-round-btn {
|
||
width: 38px !important;
|
||
height: 38px !important;
|
||
font-size: 17px !important;
|
||
}
|
||
|
||
.medium-round-btn {
|
||
width: 42px !important;
|
||
height: 42px !important;
|
||
font-size: 19px !important;
|
||
}
|
||
|
||
.big-round-btn,
|
||
.large-round-btn {
|
||
width: 40px !important;
|
||
height: 40px !important;
|
||
font-size: 19px !important;
|
||
}
|
||
|
||
.chatbot-fab-button {
|
||
width: 42px !important;
|
||
height: 42px !important;
|
||
}
|
||
|
||
.chatbot-fab-button i {
|
||
font-size: 19px !important;
|
||
}
|
||
|
||
#toggle-immersive-btn {
|
||
width: 40px !important;
|
||
height: 40px !important;
|
||
font-size: 19px !important;
|
||
}
|
||
}
|
||
|
||
/* 移动端响应式设计 (700px以下) */
|
||
@media (max-width: 700px) {
|
||
:root {
|
||
--btn-small-size: var(--btn-small-mobile);
|
||
--btn-medium-size: var(--btn-medium-mobile);
|
||
--btn-large-size: var(--btn-large-mobile);
|
||
--btn-icon-small: var(--btn-icon-small-mobile);
|
||
--btn-icon-medium: var(--btn-icon-medium-mobile);
|
||
--btn-icon-large: var(--btn-icon-large-mobile);
|
||
}
|
||
|
||
/* 确保TOC和Chatbot按钮在移动端足够小但仍可点击 */
|
||
.tiny-round-btn {
|
||
width: var(--btn-small-mobile) !important;
|
||
height: var(--btn-small-mobile) !important;
|
||
font-size: var(--btn-icon-small-mobile) !important;
|
||
}
|
||
|
||
.medium-round-btn {
|
||
width: var(--btn-medium-mobile) !important;
|
||
height: var(--btn-medium-mobile) !important;
|
||
font-size: var(--btn-icon-medium-mobile) !important;
|
||
}
|
||
|
||
.big-round-btn,
|
||
.large-round-btn {
|
||
width: var(--btn-large-mobile) !important;
|
||
height: var(--btn-large-mobile) !important;
|
||
font-size: var(--btn-icon-large-mobile) !important;
|
||
}
|
||
|
||
/* Chatbot FAB 移动端尺寸 */
|
||
#chatbot-fab {
|
||
width: var(--btn-medium-mobile) !important;
|
||
height: var(--btn-medium-mobile) !important;
|
||
font-size: var(--btn-icon-medium-mobile) !important;
|
||
}
|
||
|
||
.chatbot-fab-button {
|
||
width: var(--btn-medium-mobile) !important;
|
||
height: var(--btn-medium-mobile) !important;
|
||
}
|
||
|
||
.chatbot-fab-button i {
|
||
font-size: var(--btn-icon-medium-mobile) !important;
|
||
}
|
||
|
||
/* 沉浸式按钮在移动端已经被隐藏，这里是备用 */
|
||
#toggle-immersive-btn {
|
||
width: var(--btn-large-mobile) !important;
|
||
height: var(--btn-large-mobile) !important;
|
||
font-size: var(--btn-icon-large-mobile) !important;
|
||
}
|
||
}
|
||
|
||
/* 极小屏幕设备 (400px以下) */
|
||
@media (max-width: 400px) {
|
||
.tiny-round-btn {
|
||
width: 34px !important;
|
||
height: 34px !important;
|
||
font-size: 15px !important;
|
||
}
|
||
|
||
.medium-round-btn {
|
||
width: 38px !important;
|
||
height: 38px !important;
|
||
font-size: 17px !important;
|
||
}
|
||
|
||
.big-round-btn,
|
||
.large-round-btn {
|
||
width: 42px !important;
|
||
height: 42px !important;
|
||
font-size: 19px !important;
|
||
}
|
||
|
||
#chatbot-fab {
|
||
width: 38px !important;
|
||
height: 38px !important;
|
||
font-size: 17px !important;
|
||
}
|
||
|
||
.chatbot-fab-button {
|
||
width: 38px !important;
|
||
height: 38px !important;
|
||
}
|
||
|
||
.chatbot-fab-button i {
|
||
font-size: 17px !important;
|
||
}
|
||
}
|
||
|
||
/* 提供可访问性改进 */
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.tiny-round-btn,
|
||
.medium-round-btn,
|
||
.big-round-btn,
|
||
.large-round-btn {
|
||
transition: background-color 0.2s !important;
|
||
}
|
||
|
||
.tiny-round-btn:hover,
|
||
.medium-round-btn:hover,
|
||
.big-round-btn:hover,
|
||
.large-round-btn:hover {
|
||
transform: none !important;
|
||
}
|
||
}
|
||
|
||
/* 高对比度模式支持 */
|
||
@media (prefers-contrast: high) {
|
||
.tiny-round-btn,
|
||
.medium-round-btn,
|
||
.big-round-btn,
|
||
.large-round-btn {
|
||
border: 2px solid currentColor !important;
|
||
box-shadow: none !important;
|
||
}
|
||
}
|
||
|
||
/* 暗色模式适配 */
|
||
@media (prefers-color-scheme: dark) {
|
||
.tiny-round-btn,
|
||
.medium-round-btn,
|
||
.big-round-btn,
|
||
.large-round-btn {
|
||
background-color: #1e40af !important;
|
||
box-shadow: 0 2px 8px rgba(30, 64, 175, 0.3) !important;
|
||
}
|
||
|
||
.tiny-round-btn:hover,
|
||
.medium-round-btn:hover,
|
||
.big-round-btn:hover,
|
||
.large-round-btn:hover {
|
||
background-color: #1e3a8a !important;
|
||
}
|
||
} |