29 lines
1.5 KiB
CSS
29 lines
1.5 KiB
CSS
/* IconButton 的共享尺寸、交互态和 tooltip 外观；尺寸从所在 Toolbar 的自定义属性继承，缺省为 32px 控件/20px 图标。 */
|
|
/* 固定 flex 尺寸避免拥挤时压缩；inline-flex 居中图标，透明背景显露宿主表面，文字颜色继承宿主。 */
|
|
.button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex: 0 0 auto;
|
|
box-sizing: border-box;
|
|
width: var(--toolbar-control-width, 32px);
|
|
height: var(--toolbar-control-height, 32px);
|
|
padding: 4px 6px;
|
|
border: 0;
|
|
border-radius: 5px;
|
|
background: transparent;
|
|
color: inherit;
|
|
cursor: pointer;
|
|
}
|
|
/* SVG 同时约束宽高与 flex-basis，防止图标在文字/布局挤压下变形。 */
|
|
.button svg { width: var(--toolbar-icon-size, 20px); height: var(--toolbar-icon-size, 20px); flex: 0 0 var(--toolbar-icon-size, 20px); }
|
|
/* 悬停填底、键盘可见焦点描边、禁用态降低透明度并提示不可操作。 */
|
|
/* hover 未排除 :disabled，禁用按钮仍可能命中悬停底色；真正禁用语义由原生 disabled 属性承担。 */
|
|
.button:hover { background: #e9e7e3; }
|
|
.button:focus-visible { outline: 2px solid #9d7d66; outline-offset: 2px; }
|
|
.button:disabled { opacity: 0.45; cursor: not-allowed; }
|
|
|
|
/* tooltip 使用高层级深色面板与有限宽度；arrow 颜色与面板一致。 */
|
|
.tooltip { z-index: 1000; max-width: 240px; padding: 6px 9px; border-radius: 6px; background: #49372e; color: #fffdf9; font-size: 12px; line-height: 1.45; box-shadow: 0 3px 12px #372f2420; user-select: none; }
|
|
.arrow { fill: #49372e; }
|