/** * 测量面板样式(只做 UI) * * 设计目标: * - 视觉尽量接近截图(深色半透明面板 + 图标按钮网格 + 结果区) * - 主题颜色尽量使用 CSS 变量,保证可被 ThemeManager / Dialog 主题覆盖 */ .bim-measure-panel { width: 100%; display: flex; flex-direction: column; box-sizing: border-box; color: var(--bim-text-secondary); } .bim-measure-settings { display: none; box-sizing: border-box; color: var(--bim-text-secondary); } .bim-measure-settings-title { font-size: 14px; font-weight: 600; margin-bottom: 10px; } .bim-measure-settings-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; } .bim-measure-settings-row .label { color: var(--bim-text-secondary); font-size: 13px; flex: 0 0 auto; } .bim-measure-settings-select { flex: 0 0 auto; width: 120px; height: 28px; border-radius: 6px; border: 1px solid var(--bim-border-default); background: var(--bim-bg-inset); color: var(--bim-text-primary); padding: 0 8px; box-sizing: border-box; outline: none; } .bim-measure-settings-hint { font-size: 12px; line-height: 1.4; color: var(--bim-text-tertiary); margin-top: -4px; margin-bottom: 8px; } .bim-measure-settings-actions { margin-top: 14px; display: flex; justify-content: flex-start; gap: 10px; } /* 注意:demo 里有全局 button 样式,这里用 class 强制覆盖,避免被污染 */ .bim-measure-settings-save, .bim-measure-settings-cancel { flex: 0 0 auto !important; width: auto; min-width: 0; height: 30px; padding: 0 12px; border-radius: 4px; cursor: pointer; box-sizing: border-box; } .bim-measure-settings-save { border: none; background: var(--bim-primary); color: var(--bim-text-inverse); } .bim-measure-settings-cancel { border: 1px solid var(--bim-border-default); background: transparent; color: var(--bim-text-secondary); } .bim-measure-settings-save:hover, .bim-measure-settings-save:active, .bim-measure-settings-save:focus, .bim-measure-settings-cancel:hover, .bim-measure-settings-cancel:active, .bim-measure-settings-cancel:focus { background: inherit; outline: none; } .bim-measure-settings-save:hover { background: var(--bim-primary-hover); } /* 顶部:测量方式按钮区 */ .bim-measure-tools { display: flex; flex-direction: column; gap: 8px; } .bim-measure-tool-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .bim-measure-tool-btn { width: 100%; height: 42px; border-radius: 6px; border: 1px solid var(--bim-border-default); background: var(--bim-bg-inset); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; padding: 0; box-sizing: border-box; } .bim-measure-tool-btn:hover { background: var(--bim-component-bg-hover); border-color: var(--bim-border-strong); } .bim-measure-tool-btn.is-active { border-color: var(--bim-primary); background: var(--bim-primary-subtle); } .bim-measure-tool-btn.is-active .bim-measure-tool-icon { color: var(--bim-primary); } .bim-measure-tool-icon { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; color: var(--bim-icon-default); } .bim-measure-tool-icon svg { width: 100%; height: 100%; fill: currentColor; } /* 说明:测量方式图标已在 TS 中“瘦身”为纯 path(currentColor),一般无需额外隐藏背景 rect。 */ .bim-measure-toggle { display: flex; justify-content: flex-end; } .bim-measure-toggle-btn { height: 22px; border-radius: 4px; border: 1px solid var(--bim-border-default); background: var(--bim-bg-inset); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all 0.2s ease; padding: 0 6px; gap: 4px; font-size: 12px; line-height: 1; } .bim-measure-toggle-btn:hover { background: var(--bim-component-bg-hover); border-color: var(--bim-border-strong); } .bim-measure-toggle-text { color: var(--bim-text-secondary); } .bim-measure-toggle-icon svg { width: 14px; height: 14px; fill: currentColor; color: var(--bim-icon-default); transition: transform 0.15s ease; } .bim-measure-toggle-btn.is-expanded .bim-measure-toggle-icon svg { transform: rotate(180deg); } .bim-measure-result { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--bim-divider); display: flex; flex-direction: column; gap: 10px; } .bim-measure-row { display: flex; align-items: baseline; gap: 8px; font-size: 13px; line-height: 1.4; } .bim-measure-row .label { color: var(--bim-text-secondary); min-width: 84px; } .bim-measure-row .value { color: var(--bim-text-primary); flex: 1; word-break: break-word; } /* 主数据:仅数值黄色,单位使用默认颜色 */ .bim-measure-main-number { color: #ffd24a; } .bim-measure-main-number.is-laser-text { color: var(--bim-text-primary); } .bim-measure-main-unit { color: var(--bim-text-primary); } .bim-measure-xyz { display: flex; flex-direction: column; gap: 6px; } .bim-measure-xyz .value { font-variant-numeric: tabular-nums; } /* XYZ:红/绿/蓝展示 */ .bim-measure-xyz-x { color: #ff4d4f !important; } .bim-measure-xyz-y { color: #52c41a !important; } .bim-measure-xyz-z { color: #1677ff !important; } .bim-measure-footer { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--bim-divider); display: flex; align-items: center; justify-content: flex-start; gap: 10px; } .bim-measure-clear-btn { background: transparent; border: none; color: var(--bim-danger); cursor: pointer; padding: 0; font-size: 13px; flex: 0 0 auto !important; width: auto; min-width: 0; } /* 删除按钮不需要 hover 效果 */ .bim-measure-clear-btn:hover, .bim-measure-clear-btn:active, .bim-measure-clear-btn:focus { background: transparent; border: none; outline: none; text-decoration: none; } .bim-measure-settings-btn { /* 你要求:管理(设置)按钮去掉边框与 hover;按钮按自身尺寸即可 */ width: 24px; height: 24px; border-radius: 4px; border: none; background: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; /* 右侧对齐,但不扩大可点击区域 */ margin-left: auto; /* 防止外部环境(如 demo)给 button 设置 flex: 1 导致“各占一半” */ flex: 0 0 auto !important; } /* 你要求:设置按钮不需要 hover 效果 */ .bim-measure-settings-btn:hover, .bim-measure-settings-btn:active, .bim-measure-settings-btn:focus { background: transparent; border: none; outline: none; } .bim-measure-settings-btn svg { width: 18px; height: 18px; fill: currentColor; color: var(--bim-icon-default); }