fix(button-group): add horizontal scroll for bottom toolbar overflow
When container width is too small, the bottom toolbar now scrolls horizontally. Also removes box-shadow on glass-pill sections to prevent clipping artifacts and sets transparent background on root element. Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-opencode) Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
This commit is contained in:
@@ -5,6 +5,7 @@
|
|||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
pointer-events: auto;
|
pointer-events: auto;
|
||||||
|
background: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bim-btn-group-root.static {
|
.bim-btn-group-root.static {
|
||||||
@@ -308,6 +309,36 @@
|
|||||||
padding: 8px;
|
padding: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 底部工具栏:宽度不足时允许横向滚动 */
|
||||||
|
.bim-btn-group-root.is-bottom-toolbar.dir-row {
|
||||||
|
max-width: calc(100% - 40px);
|
||||||
|
overflow-x: auto;
|
||||||
|
overflow-y: visible;
|
||||||
|
scrollbar-width: thin;
|
||||||
|
scrollbar-color: rgba(255,255,255,0.2) transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bim-btn-group-root.is-bottom-toolbar.dir-row .bim-btn-group-section {
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bim-btn-group-root.is-bottom-toolbar.dir-row::-webkit-scrollbar {
|
||||||
|
height: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bim-btn-group-root.is-bottom-toolbar.dir-row::-webkit-scrollbar-track {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bim-btn-group-root.is-bottom-toolbar.dir-row::-webkit-scrollbar-thumb {
|
||||||
|
background: rgba(255, 255, 255, 0.2);
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bim-btn-group-root.is-bottom-toolbar.dir-row::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: rgba(255, 255, 255, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
/* ========== type-glass-pill: 胶囊容器 + 毛玻璃 + 圆形按钮 ========== */
|
/* ========== type-glass-pill: 胶囊容器 + 毛玻璃 + 圆形按钮 ========== */
|
||||||
/* 使用主题系统 CSS 变量,支持深色/浅色主题切换 */
|
/* 使用主题系统 CSS 变量,支持深色/浅色主题切换 */
|
||||||
|
|
||||||
@@ -317,7 +348,7 @@
|
|||||||
-webkit-backdrop-filter: blur(24px);
|
-webkit-backdrop-filter: blur(24px);
|
||||||
border: 1px solid var(--bim-floating-border);
|
border: 1px solid var(--bim-floating-border);
|
||||||
border-radius: 9999px;
|
border-radius: 9999px;
|
||||||
box-shadow: var(--bim-floating-shadow);
|
box-shadow: none;
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
}
|
}
|
||||||
@@ -504,4 +535,4 @@
|
|||||||
|
|
||||||
.opt-btn-dropdown.type-glass-pill.theme-dark .opt-btn-dropdown-item .opt-btn-dropdown-label {
|
.opt-btn-dropdown.type-glass-pill.theme-dark .opt-btn-dropdown-item .opt-btn-dropdown-label {
|
||||||
color: var(--bim-text-primary);
|
color: var(--bim-text-primary);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user