style(工具栏): 调整撤销重做按钮组样式并添加分隔线
- 将撤销重做按钮放入独立容器并设置间距 - 添加左右分隔线样式及不同边距 - 调整保存按钮的尺寸和间距
This commit is contained in:
@@ -103,6 +103,33 @@ html, body {
|
|||||||
background: #f5f5f5;
|
background: #f5f5f5;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 撤销重做按钮组 */
|
||||||
|
.toolbar-action-group {
|
||||||
|
display: flex;
|
||||||
|
gap: 3px;
|
||||||
|
margin: 0 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 左侧分隔线(文本按钮后) */
|
||||||
|
.toolbar-divider-v.divider-left {
|
||||||
|
margin-left: 6px;
|
||||||
|
margin-right: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 右侧分隔线(保存按钮前) */
|
||||||
|
.toolbar-divider-v.divider-right {
|
||||||
|
margin-left: 1px;
|
||||||
|
margin-right: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 保存/预览按钮 */
|
||||||
|
.btn-primary {
|
||||||
|
min-width: 80px;
|
||||||
|
height: 36px;
|
||||||
|
padding: 0 14px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
/* 文本输入框删除按钮 */
|
/* 文本输入框删除按钮 */
|
||||||
.text-input .text-delete-btn {
|
.text-input .text-delete-btn {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|||||||
@@ -13,10 +13,12 @@
|
|||||||
<button class="btn" id="addImageBtn">背景图</button>
|
<button class="btn" id="addImageBtn">背景图</button>
|
||||||
<button class="btn" id="addOverlayBtn">层叠图</button>
|
<button class="btn" id="addOverlayBtn">层叠图</button>
|
||||||
<button class="btn" id="addTextBtn">文本</button>
|
<button class="btn" id="addTextBtn">文本</button>
|
||||||
<div class="toolbar-divider-v"></div>
|
<div class="toolbar-divider-v divider-left"></div>
|
||||||
|
<div class="toolbar-action-group">
|
||||||
<button class="toolbar-btn-icon" id="undoBtn" title="撤销 (Ctrl+Z)">↩</button>
|
<button class="toolbar-btn-icon" id="undoBtn" title="撤销 (Ctrl+Z)">↩</button>
|
||||||
<button class="toolbar-btn-icon" id="redoBtn" title="重做 (Ctrl+Y)">↪</button>
|
<button class="toolbar-btn-icon" id="redoBtn" title="重做 (Ctrl+Y)">↪</button>
|
||||||
<div class="toolbar-divider-v"></div>
|
</div>
|
||||||
|
<div class="toolbar-divider-v divider-right"></div>
|
||||||
<button class="btn btn-primary" id="saveBtn">保存/预览</button>
|
<button class="btn btn-primary" id="saveBtn">保存/预览</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user